当前位置:主页 > 网页特效 > 播放器代码 >

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

发布时间:2018/07/31 来源:互联网 浏览: 关键词:HTML5 视频播放器 播放器代码 json 
基于JSON数据HTML5视频播放器js插件 基于JSON数据HTML5视频播放器js插件
阿里云

简要教程

frame-player是一款基于JSON数据HTML5视频播放器js插件。该插件没有使用视频文件,只使用JSON格式的数据。在移动手机设备上使用图片帧的形式来播放视频文件。

HTML5视频文件的一个最大问题是不能再手机设备上在线播放。通常手机设备的解决方案是通过原生的播放器来打开HTML5视频文件,而不是让页面来打开它们,以确保视频文件可以正常播放。该插件通过将播放文件替换为特定的JSON文件,然后以图片序列的形式在手机设备上展示视频文件。

安装

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

bower install frame-player     

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

<linkrel="stylesheet"href="path-to/frameplayer.css">
<scriptsrc="path-to/frameplayer.js"></script>   

使用方法

HTML结构

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

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

初始化插件

varplayer =newFramePlayer('my-player', options);
player.play();     

配置参数

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

varoptions = ({
    '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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top