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. 线性数据结构之栈——Stack
			
    Linear data structures linear structures can be thought of as having two ends, whose items are order ...
    
			
    2. 
						
  2. Matlab数值计算示例： 牛顿插值法、LU分解法、拉格朗日插值法、牛顿插值法
			
    本文源于一次课题作业,部分自己写的,部分借用了网上的demo 牛顿迭代法(1) x=1:0.01:2; y=x.^3-x.^2+sin(x)-1; plot(x,y,'linewidth',2);gr ...
    
			
    3. 
						
  3. 使用Java原生代理实现AOP
			
    ### 本文由博主柒.原创,转载请注明出处 ### 完整源码下载地址 [https://github.com/MatrixSeven/JavaAOP](https://github.com/Matri ...
    
			
    4. 
						
  4. [C#] C# 知识回顾 - 学会使用异常
			
    学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...
    
			
    5. 
						
  5. iOS开发之Alamofire源码深度解析
			
    今天博客中的Alamofire源码的版本是以现在最新的3.4版本为例.上篇博客系统的对NSURLSession相关的东西进行了详细的解析,详情请看<详解NSURLSession>,为了就是 ...
    
			
    6. 
						
  6. Could not evaluate expression
			
    VS15 调试变量不能显示值,提示:Could not evaluate expression 解决办法: 选择"在调试时显示运行以单击编辑器中的按钮"重启VS即可. 可参考:Vi ...
    
			
    7. 
						
  7. 微信小程序开发—快速掌握组件及API的方法
			
    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
    
			
    8. 
						
  8. iOS 后台处理
			
    iOS 后台处理的常见用途 1.进入后台时候删除资源:应用处于挂起状态的时候所占用的资源越少,该应用被iOS终止的风险就越低.通过从内存中清理那些易于重新创建的资源,可以增加应用驻留内存的机会,因此可 ...
    
			
    9. 
						
  9. Android 扫描条形码（Zxing插件）
			
    使用Android Studio 一.在build.gradle(Module:app)添加代码  下载,调用插件 1 apply plugin: 'com.android.application'  ...
    
			
    10. 
						
  10. Collections
			
    2017-01-06  22:50:43 数据结构和算法 <如何学习数据结构?>:https://www.zhihu.com/question/21318658 <How do I  ...
    
			
    11.