html 在线播放器,HTML5 Web播放器-Video.js

原标题：HTML5 Web播放器-Video.js

Video.js是一款优秀的HTML5 Web视频播放器。它同时支持 HTM5 和 Flash 视频，支持在桌面和移动设备上的视频播放，截至目前，大概有40W的站点在使用Video.js作为web播放器。

获取Video.js

Video.js支持npm和bower方式安装：

NPM

$ npm install--save video.js

Bower

$ bower install--save video.js

也可以在页面中直接通过标签引用CDN资源：

>使用Video.js

有了 Video.js ，您只需使用一个HTML5 标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作，并非只有支持 HTML5 video 的浏览器。除了基本的标记，Video.js 还需要一些额外的标记。

Video.js支持元素的所有属性(如控件，预加载等)，但它也支持它自己的选项。有两种方法可以创建Video.js播放器并传递选项，但它们都以具有属性class ="video-js"的标准元素开头：

请开启Java脚本以便支持HTML5 video播放器

添加class: vjs-big-play-centered可以将播放按钮居中，否则播放按钮默认是在播放器的左上角。

现在运行页面，就可以看到一个漂亮的播放器，点击播放按钮即可播放影片。

我们可以使用data-setup属性来设置video的一些额外的option选项，通常是JSON格式，如：

如果你不想使用auto-setup，你可以暂时不用设置auto-setup属性，然后手动初始化一个视频元素。

手动js调用播放器

首先元素中去掉了auto-setup属性，其他不变。

请开启Java脚本以便支持HTML5 video播放器

然后，使用videojs()方法加载Video，如：

videojs( "example_video_1", {}, function(){ // Player (this) is initialized and ready.});

videojs()方法中，第一个参数是video标签的 ID。

第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。

第三个参数是一个'ready'回调。一旦 Video.js 初始化完成后，就会触发这个回调。

完整的js代码如下：

<> varplayer = videojs( 'my-player'); varoptions = {}; varplayer = videojs( 'my-player', options, functiononPlayerReady(){ videojs.log( 'Your player is ready!'); this.play(); // 开始播放// 监听播放结束状态this.on( 'ended', function(){ videojs.log( 'Awww...over so soon?!'); }); }); >

更多设置和选项请参考Video.js项目地址：https://github.com/videojs/video.js。

查看原文链接有在线演示和源代码下载。返回搜狐，查看更多

责任编辑：

html 在线播放器,HTML5 Web播放器-Video.js相关推荐

php 在线调用音乐播放器,宅音乐播放器,HTML5网页播放器，带后台管理及API调用，使用thinkphp编写...
宅音乐播放器宅音乐播放器,HTML5网页播放器,集成后台管理及API调用,目前正在开发中,敬请关注技术栈后端:thinkphp 5.1 前端:layui 数据库:mysql 演示整合依赖安装包 ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
html怎样自动播放视频,html5自动播放mov格式视频的实例代码
这个不算啥新奇吧?但还是记录一下. 这个问题应该这么看. 1.首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件. 如何识别?设置MIME类型.以IIS为例.除了可以在IIS界面上直 ...
神思二代身份证阅读器集成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 jquery视频播放插件Video.js
<!doctype html> <html> <head><meta charset="utf-8"><title>Vi ...
iphone html5音乐播放器,HTML5音频播放器,播放列表
许多人创建过音频播放器.通常,您只需选择一个可用的素材,通常是flash player.然而,您可能已经注意到,这些移动设备上的flash播放器不能正常工作(iPhone和Android).今天我要告 ...
带倍速音频播放器_带有播放列表HTML5音频播放器
带倍速音频播放器 HTML5 Audio player with playlist HTML5 audio player. Many of you faced with the task of cre ...

html 在线播放器,HTML5 Web播放器-Video.js

html 在线播放器,HTML5 Web播放器-Video.js相关推荐

最新文章

热门文章