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

最新推荐文章于 2024-06-22 10:26:33 发布

Angel19951012

最新推荐文章于 2024-06-22 10:26:33 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/Angel19951012/article/details/50462806

版权

本文介绍了如何使用基于JSON数据的HTML5视频播放器js插件。通过Bower安装，引用CSS和JS文件，设置HTML结构，初始化插件，并详细解释了配置参数。同时，还阐述了如何生成视频的JSON格式文件，包括使用ffmpeg提取图片帧和用Node.js或PHP转换成JSON。

摘要由CSDN通过智能技术生成

一、安装
可以通过Bower来安装该视频播放器插件。
bower install frame-player

在页面中引入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',
});

五、生成视频的JSON格式文件
1、首先使用ffmpeg来从一个视频文件中生成图片帧。
ff