html插件使用+教程视频,基于JSON数据HTML5视频播放器js插件教程

一、安装

可以通过Bower来安装该视频播放器插件。

bower install frame-player

在页面中引入frameplayer.css和frameplayer.js文件。

二、Html结构

在页面中插入下面的HTML代码，data-src属性是视频文件的JSON格式文件。

三、初始化插件

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广告植入自己的产品，从而获得丰厚的广告收益。