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. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记
			
    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...
    
			
    2. 
						
  2. 前端开发中SEO的十二条总结
			
    一. 合理使用title, description, keywords二. 合理使用h1 - h6, h1标签的权重很高, 注意使用频率三. 列表代码使用ul, 重要文字使用strong标签四. 图片 ...
    
			
    3. 
						
  3. ADO.NET对象的详解
			
    1. Connection 类 和数据库交互,必须连接它.连接帮助指明数据库服务器.数据库名字.用户名.密码,和连接数据库所需要的其它参数.Connection对象会被Command对象使用,这样就能 ...
    
			
    4. 
						
  4. 探索ASP.NET MVC5系列之~~~1.基础篇---必须知道的小技能
			
    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程 汇总:http://www.cnblogs.com/dunitian/p/4822808.html#mvc 本章D ...
    
			
    5. 
						
  5. [OpenGL超级宝典]专栏前言
			
    我小时候的梦想呢,是做宇航员或者科学家或者是做一款属于自己的游戏,后来前面两个梦想都没有实现,于是我就来实现我的第三个梦想了,,,我呢,也算是零基础,因为我的专业是物联网工程,这个专业覆盖面之广,简直 ...
    
			
    6. 
						
  6. ASP.NET Core project.json imports 是什么意思？
			
    示例代码: "frameworks": { "netcoreapp1.0.0": { "imports" : "portable- ...
    
			
    7. 
						
  7. Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具
			
    前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...
    
			
    8. 
						
  8. 去IOE的一点反对意见以及其他
			
    某天在机场听见两老板在聊天,说到他们目前销售的报表老跟不上的问题,说要请一个人,专门合并和分析一些发过来的excel表格,我真想冲上去说,老板,你需要的是一个信息处理的系统,你需要咨询么.回来一直耿耿 ...
    
			
    9. 
						
  9. 【干货分享】流程DEMO-请休假
			
    流程名: 请假申请  流程相关文件: 流程包.xml WebService业务服务.xml WebService.asmx WebService.cs  流程说明: 流程中集成了webservice服 ...
    
			
    10. 
						
  10. 茂名石化BPM应用实践 ——业务协同及服务共享平台建设和应用
			
    一.茂名石化简介 茂名石化隶属于中国石油化工集团公司,创建于1955年,是国家"一五"期间156项重点项目之一.经过50多年的发展,茂名石化已成为我国生产规模最大的炼油化工企业之一 ...
    
			
    11.