1.github地址

2.常用API:

class :

　　video-js: video-js应用视频所需的风格。js功能,比如全屏和字幕。

　　vjs-default-skin: vjs-default-skin默认皮肤适用于HTML控件,并且可以删除或覆盖创建自己的控制设计

data-setup 设置常用属性:

　　autoplay :是否自动播放
　　controls: 设置是否可以人为控制播放
　　preload：{ 设置预加载
　　auto： 立即加载(浏览器允许的情况下)
　　metadata:只加载视频的基本信息
　　none:不加载，直到用户点击播放的时候
　　}
　　poster：设置未播放时候的快照
　　loop：控制是否循环播放
　　width
　　height

JS形式:

videojs("example_video_1", {}, function(){

　　// Player (this) is initialized and ready.

});

videojs中设置data-setup的两种方式:

　　1.html:

　　　　<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
　　2.js:

　　　　videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });

track:

　　kind:定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
　　src:字幕文件的URL地址
　　srclang:字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。
　　label:字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。
　　default:指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕

例子:

<!DOCTYPE html>

<html>

<head>

    <title>video.js</title>

    <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">

    <!-- If you'd like to support IE8 -->

    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

</head>

<body>

  <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"

  poster="D:\CloudMusic\MV\jay.zhou.jpg" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'>

    <!--MP4的数据源-->

    <source src="D:\CloudMusic\MV\jay.zhou.mp4" type='video/mp4'>

    <track kind="subtitles" label="Chinese subtitles" src="D:\CloudMusic\MV\st.vtt"

   srclang="zh" label="Chinese">

  </video>

  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>

</body>

</html>

截图:

												


											
video.js的更多相关文章
	

    
								
  1. video.js播放mp4文件
		
    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
    
		
    2. 
						
  2. video.js使用教程API
		
    videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3. ...
    
		
    3. 
						
  3. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
		
    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
    
		
    4. 
						
  4. 习课的视频播放器 video.js
		
    jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
    
		
    5. 
						
  5. video.js html5 视频播放器
		
    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
    
		
    6. 
						
  6. wordpress使用video.js与七牛云存储实现无广告视频分享应用
		
    video.js是一款极受欢迎的基于HTML5的开源WEB视频播放器,其充分利用了HTML5的视频支持特性,可以实现全平台的无视频插件播放功能,对于现在流行的手机.PAD等移动智能终端有极佳的应用体验 ...
    
		
    7. 
						
  7. html5 video.js 使用及兼容所有浏览器
		
    废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...
    
		
    8. 
						
  8. Video.js网页视频播放插件
		
        插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
    
		
    9. 
						
  9. video.js的使用
		
    跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C++中的时间函数
			
    C++获取时间函数众多,何时该用什么函数,拿到的是什么时间?该怎么用?很多人都会混淆. 本文是本人经历了几款游戏客户端和服务器开发后,对游戏中时间获取的一点总结. 最早学习游戏客户端时,为了获取最精确 ...
    
			
    2. 
						
  2. 散列表(hash table)——算法导论(13)
			
    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...
    
			
    3. 
						
  3. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值
			
    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...
    
			
    4. 
						
  4. 张高兴的 UWP 开发笔记：横向 ListView
			
    ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...
    
			
    5. 
						
  5. java中if和switch哪个效率快
			
    首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...
    
			
    6. 
						
  6. JDK安装与配置
			
    JDK安装与配置 一.下载 JDK是ORACLE提供免费下载使用的,官网地址:https://www.oracle.com/index.html 一般选择Java SE版本即可,企业版的选择Java  ...
    
			
    7. 
						
  7. ios label 自动计算行高详解
			
    在OC当中自动计算行高主要调用系统的 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #ffffff } span ...
    
			
    8. 
						
  8. 浅谈iptables 入站 出站以及NAT实例
			
    --------------本文是自己工作上的笔记总结,适合的可以直接拿去用,不适合的,适当修改即可!--------------- iptbales默认ACCEPT策略,也称通策略,这种情况下可以做 ...
    
			
    9. 
						
  9. 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）
			
    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...
    
			
    10. 
						
  10. Linux模块编程框架
			
    Linux是单内核系统,可通用计算平台的外围设备是频繁变化的,不可能将所有的(包括将来即将出现的)设备的驱动程序都一次性编译进内核,为了解决这个问题,Linux提出了可加载内核模块(Loadable  ...
    
			
    11.