基於JSON數據HTML5視頻播放器js插件教程

1、安裝
能夠經過Bower來安裝該視頻播放器插件。
bower install frame-player   

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

2、Html結構
在頁面中插入下面的HTML代碼，data-src屬性是視頻文件的JSON格式文件。
<div id="my-player" class="frameplayer" data-vidsrc="videos/video.json"></div>  

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

4、配置參數
下面是這個視頻播放插件的一些可用參數：
var options = ({
'rate': 30,
'controls': false,
'autoplay': true,
'width': '640px',
'height': '390px',
});

5、生成視頻的JSON格式文件
一、首先使用ffmpeg來從一個視頻文件中生成圖片幀。
ffmpeg -i video.mp4 -an -f image2 "%d.jpg"                

二、而後將全部的圖片幀轉換爲一個單獨的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廣告植入本身的產品，從而得到豐厚的廣告收益。