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

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

php h5视频播放器,基于JSON数据HTML5视频播放器js插件相关推荐

基于JSON数据HTML5视频播放器js插件
点击打开链接http://www.htmleaf.com/html5/yinpinheshipin/201505261910.html 点击打开链接https://github.com/vagnerv ...
Ajax提交json数据,通过jquery.cookie.js插件解决csrf_token问题
html代码和js代码 <!doctype html> <html lang="en"> <head><meta charset=&quo ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
android系统更新视频播放器,基于的Android系统地视频播放器.doc
本科毕业设计(论文) 基于Android系统的视频播放器Through the implementation of video player based on Android platform 致谢 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
在线html5视频播放器,打造自己的html5视频播放器
推荐这篇文章: 前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的&qu ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
基于JSON数据交换模型的实时支付系统设计和实现
随着支付行业向各类便民账单服务.金融服务类扩展,支付内核采用固定格式数据交换模型已不能适应快速灵活开发的需要.以JSON为基础构建精简3层数据交换模型,并对JSON内存分配管理.键值使用进行优化,实现 ...
android studio使用nodejs本地服务器json数据_使用Node.js的Alexa技巧
可以使用AlexaLambda函数或RESTAPI端点开发Alexa技能.Lambda函数是Amazon实现AWS中提供的无服务器功能.Amazon建议使用Lambda函数,尽管它们不容易调试.虽然您 ...

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

php h5视频播放器,基于JSON数据HTML5视频播放器js插件相关推荐

最新文章

热门文章