论坛风格切换
您好,欢迎光临本站!   登录 注册新用户
  • 1475阅读
  • 0回复

[分享源码]基于JSON数据HTML5视频播放器js插件教程 [复制链接]

上一主题 下一主题
 
发帖
113
黑豆
565
威望
565
贡献值
0
交易币
0
红豆
0
只看楼主 倒序阅读 0 发表于: 2016-01-05
一、安装
可以通过Bower来安装该视频播放器插件。
bower install frame-player  

在页面中引入frameplayer.css和frameplayer.js文件。
<link rel="stylesheet" href="path-to/frameplayer.css">
<script src="path-to/frameplayer.js"></script>

二、Html结构
在页面中插入下面的HTML代码,data-src属性是视频文件的JSON格式文件。
<div id="my-player" class="frameplayer" data-vidsrc="videos/video.json"></div>  

三、初始化插件
var player = new FramePlayer('my-player', options);
player.play();  

四、配置参数
下面是这个视频播放插件的一些可用参数:
var options = ({
'rate': 30,
'controls': false,
'autoplay': true,
'width': '640px',
'height': '390px',
});

五、生成视频的JSON格式文件
1、首先使用ffmpeg来从一个视频文件中生成图片帧。
ffmpeg -i video.mp4 -an -f image2 "%d.jpg"                

2、然后将所有的图片帧转换为一个单独的JSON文件。
可使用 Node.js:
cd converter/nodejs
node app.js frameStart frameEnd folder/to/imgs/ json/video.json

也可以使用 PHP:
cd converter/php
php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json

广告平台是KeyMob与第三方广告平台合作的移动广告植入业务,应用开发者可通过将SDK广告植入自己的产品,从而获得丰厚的广告收益。
快速回复
限100 字节
 
上一个 下一个