音频/视频

基于JSON数据HTML5视频播放器js插件

也想出现在这里?联系我们
创客主机

frame-player 是一款基于 JSON 数据 HTML5 视频播放器 js 插件。该插件没有使用视频文件,只使用 JSON 格式的数据。在移动手机设备上使用图片帧的形式来播放视频文件。HTML5 视频文件的一个最大问题是不能再手机设备上在线播放。通常手机设备的解决方案是通过原生的播放器来打开 HTML5 视频文件,而不是让页面来打开它们,以确保视频文件可以正常播放。该插件通过将播放文件替换为特定的 JSON 文件,然后以图片序列的形式在手机设备上展示视频文件。

使用方法:

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

  1. <link rel="stylesheet" href="path-to/frameplayer.css">
  2. <script src="path-to/frameplayer.js"></script>

HTML 结构:

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

  1. <div id="my-player" class="frameplayer" data-vidsrc="videos/video.json"></div>

初始化插件:

  1. var player = new FramePlayer('my-player', options);
  2. player.play();

配置参数:

下面是这个视频播放插件的一些可用参数:

  1. var options = ({
  2.     'rate': 30,
  3.     'controls': false,
  4.     'autoplay': true,
  5.     'width': '640px',
  6.     'height': '390px',
  7.     // 'radius': '50%'
  8. });

方法:

方法参数返回值描述
play()NoneNothing开始播放视频文件
pause()NoneNothing暂停播放视频文件
resume()NoneNothing暂停之后继续播放视频文件

生成视频的 JSON 格式文件

1、首先使用 ffmpeg 来从一个视频文件中生成图片帧。

  1. ffmpeg -i video.mp4 -an -f image2 "%d.jpg"

2、然后将所有的图片帧转换为一个单独的 JSON 文件。

可使用 Node.js:

  1. cd converter/nodejs
  2.     node app.js frameStart frameEnd folder/to/imgs/ json/video.json

也可以使用 PHP:

  1. cd converter/php
  2.     php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

嘿,欢迎咨询!