html5 mp4在线播放器,HTML5 Web播放器-Video.js
获取Video.js
Video.js支持npm和bower方式安装:
NPM
$ npm install --save video.js
Bower
$ bower install --save video.js
也可以在页面中直接通过标签引用CDN资源:
当然你也可以下载Video.js到本地,然后引用即可,点击这里下载。
使用Video.js
有了 Video.js ,您只需使用一个HTML5 标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作,并非只有支持 HTML5 video 的浏览器。除了基本的标记,Video.js 还需要一些额外的标记。
Video.js支持元素的所有属性(如控件,预加载等),但它也支持它自己的选项。 有两种方法可以创建Video.js播放器并传递选项,但它们都以具有属性class ="video-js"的标准元素开头:
id="my-player"
class="video-js vjs-big-play-centered"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
请开启Javascript脚本以便
支持HTML5 video播放器
添加class: vjs-big-play-centered可以将播放按钮居中,否则播放按钮默认是在播放器的左上角。
现在运行页面,就可以看到一个漂亮的播放器,点击播放按钮即可播放影片。
我们可以使用data-setup属性来设置video的一些额外的option选项,通常是JSON格式,如:
如果你不想使用auto-setup,你可以暂时不用设置auto-setup属性,然后手动初始化一个视频元素。
手动js调用播放器
首先元素中去掉了auto-setup属性,其他不变。
id="my-player"
class="video-js vjs-big-play-centered"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png">
请开启Javascript脚本以便
支持HTML5 video播放器
然后,使用videojs()方法加载Video,如:
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
videojs()方法中,第一个参数是video标签的 ID。
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个'ready'回调。一旦 Video.js 初始化完成后,就会触发这个回调。
完整的js代码如下:
var player = videojs('my-player');
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
this.play(); // 开始播放
// 监听播放结束状态
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
html5 mp4在线播放器,HTML5 Web播放器-Video.js相关推荐
- web前端入门到实战:HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
- html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- html5直播视频模板,HTML5 VideoAPI,打造自己的Web视频播放器
一.基础知识 1.用法video> 注意:audio和video元素必须同时包含开始和结束标签,不能使用 2.重要HTML属性 controls:ontrol:如果出现该属性,则向用户显示控件, ...
- 基于html5的在线教育,基于HTML5的在线学习系统的设计与实现
基于HTML5的在线学习系统的设计与实现 发布时间:2019-11-18所属分类:科技论文浏览:1次 摘 要: 摘 要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...
- 神思二代身份证阅读器集成WEB实例文档js及说明
神思二代身份证阅读器使用说明 --By wuhebin 20180705 1. 硬件说明:神思SS628(100)台式二代身份证阅读器 2. 神思阅读器仅支持IE浏览器或者兼容IE浏览 ...
- Vue 播放监控m3u8视频流格式 (Video.js)篇
因业务需求,对接监控显示自己的系统中. 前端框架vue 监控返回格式m3u8,视频流格式h264,如果视频流格式是h265的建议先把流转换h264. 4.本篇文章讲解video.js插件播放m3u8 ...
- html5表格在线生成,专业的Web报表工具——表格在线生成制作工具
Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引 在w ...
- html5 表格 在线生成,专业的Web报表软件——在线表格生成制作工具
Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引 在w ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- html5摄像头 在线演示,基于HTML5实现的超酷摄像头(HTML5 webcam)摄
}); WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造软件的API,例如,摄像头,麦克风,或者是加快表.你可以或许不依赖其它的插件来调用你需要的本机软件设备. ...
最新文章
- c++ map iterator 获取key_前K个高频的元素衍生之Map的Value与Key排序
- C++单链表学习随想
- SAP ABAP实用技巧介绍系列之 template的match顺序
- linux线程多参数传递参数,Linux中多线程编程并传递多个参数
- 指针和引用的区别_浅析指针与引用
- 推荐系统顶会RecSys’20亮点赏析
- VS2019 使用 C/C++ 动态链接库 并 进行调用
- HDU 3641 Treasure Hunting(阶乘素因子分解+二分)
- 圆周卷积(circular convolution)
- 关于Debug和Release之本质区别(转)
- 诺基亚n1系统更新显示无网络_曾经世界第一大手机系统,诺基亚塞班系统竟还活着!你用过吗?...
- 与戴尔科技同行,与远见如影随形
- 前端杂烩——在工作,在思考,在沉淀
- 一个大一学生学习C语言的心得
- 笔记本双显卡 EFI 启动安装 ArchLinux
- js 打印去掉页眉页脚页码_JS实现无页眉页脚打印(转)
- es where_阿水出现在eStar二队,ES.JackeyLove正在连接?
- 圣思园张龙-Java SE 第三讲(原生数据类型使用陷阱 Pitfall of Primitive Data Type)
- gitlab安装后出现的web IDE显示报错问题
- 程序员为什么不单干、接私活、自己开公司