音频/视频
基于JSON数据HTML5视频播放器js插件
PetitQ
frame-player 是一款基于 JSON 数据 HTML5 视频播放器 js 插件。该插件没有使用视频文件，只使用 JSON 格式的数据。在移动手机设备上使用图片帧的形式来播放视频文件。HTML5 视频文件的一个最大问题是不能再手机设备上在线播放。通常手机设备的解决方案是通过原生的播放器来打开 HTML5 视频文件，而不是让页面来打开它们，以确保视频文件可以正常播放。该插件通过将播放文件替换为特定的 JSON 文件，然后以图片序列的形式在手机设备上展示视频文件。
使用方法：
在页面中引入 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',
// '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/nodejsnode app.js frameStart frameEnd folder/to/imgs/ json/video.json
也可以使用 PHP：
cd converter/phpphp to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
