frame-player是一款基于JSON数据HTML5视频播放器js插件。该插件没有使用视频文件,只使用JSON格式的数据。在移动手机设备上使用图片帧的形式来播放视频文件。
HTML5视频文件的一个最大问题是不能再手机设备上在线播放。通常手机设备的解决方案是通过原生的播放器来打开HTML5视频文件,而不是让页面来打开它们,以确保视频文件可以正常播放。该插件通过将播放文件替换为特定的JSON文件,然后以图片序列的形式在手机设备上展示视频文件。
安装
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',
// 'radius': '50%'
});
方法
方法
参数
返回值
描述
play()
None
Nothing
开始播放视频文件
pause()
None
Nothing
暂停播放视频文件
resume()
None
Nothing
暂停之后继续播放视频文件
生成视频的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