flv.js php,flv.js的使用详解

这次给大家带来flv.js的使用详解，使用flv.js的注意事项有哪些，下面就是实战案例，一起来看一下。

Bilibili相信大家都不会陌生，而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放器，纯原生 JavaScript 开发(ECMAScript 6 编写) ，没有用到 Flash。

它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。

github

如果你已经安装了nodejs可以使用 npm来安装 flv.js

推荐使用cnpm 来安装

当然你也可以使用其他方式进行下载

在下载好的文件夹中找到dist文件夹中的flv.min.js复制出来

可以使用简单的服务器测试

代码：

flv.js demo

.mainContainer { display: block; width: 1024px; margin-left: auto; margin-right: auto;

}.urlInput { display: block; width: 100%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 8px;

}.centeredVideo { display: block; width: 100%; height: 576px; margin-left: auto; margin-right: auto; margin-bottom: auto;

}.controls { display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto;

}

Your browser is too old which doesn't support HTML5 video.

开始

暂停

停止

跳转

var player = document.getElementById('videoElement'); if (flvjs.isSupported()) { var flvPlayer = flvjs.createPlayer({ type: 'flv', url: '你的视频.flv'

});

flvPlayer.attachMediaElement(videoElement);

flvPlayer.load(); //加载

} function flv_start() {

player.play();

} function flv_pause() {

player.pause();

} function flv_destroy() {

player.pause();

player.unload();

player.detachMediaElement();

player.destroy();

player = null;

} function flv_seekto() {

player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

flv.js php,flv.js的使用详解相关推荐

JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
js中toString()和String()区别详解
转载自 js中toString()和String()区别详解我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 ...
java调用js匿名函数参数,js匿名函数作为函数参数详解
由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
JS逆向之浏览器补环境详解
JS逆向之浏览器补环境详解 "补浏览器环境"是JS逆向者升职加薪的必备技能,也是工作中不可避免的操作. 为了让大家彻底搞懂 "补浏览器环境"的缘由及原理,本文将 ...
node.js卸载、安装、配置详解
node.js卸载.安装.配置详解一. node.js卸载二.下载安装 2.1 下载 2.2 安装 2.2.1 选择msi安装 2.2.2 选择zip安装三.配置 3.1 环境变量配置 3.2 ...
JS弹出窗口Window.Open详解
JS弹出窗口Window.Open详解一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...
JS中的日期和时间详解
JS中的日期和时间详解关于Date()构造函数简单实例用Date()构造函数创建时钟关于Date()构造函数 Date()构造函数是javascript的核心语言部分,用来创建表示时间和日期的 ...
easyui js解析字符串_js相关：详解Jquery Easyui的验证扩展
js相关:详解Jquery Easyui的验证扩展发布于 2020-7-2| 复制链接本文主要介绍了Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式.具有一定 ...
php js后端渲染,webpack后端渲染详解
本文主要介绍了webpack配置之后端渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. webpack配置之后端渲染2017年, vue, re ...

flv.js php,flv.js的使用详解

flv.js php,flv.js的使用详解相关推荐

最新文章

热门文章