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. video.js使用教程API

    videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3. ...

  3. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  4. 习课的视频播放器 video.js

    jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...

  5. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  6. wordpress使用video.js与七牛云存储实现无广告视频分享应用

    video.js是一款极受欢迎的基于HTML5的开源WEB视频播放器,其充分利用了HTML5的视频支持特性,可以实现全平台的无视频插件播放功能,对于现在流行的手机.PAD等移动智能终端有极佳的应用体验 ...

  7. html5 video.js 使用及兼容所有浏览器

    废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...

  8. Video.js网页视频播放插件

        插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...

  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 ...

随机推荐

  1. Oracle 的基本操作符

    != 不等于 select empno,ename,job from scott.emp where job!='manager' ^= 不等于 select empno,ename,job from ...

  2. Git Bash的一些命令和配置

    查看git版本号: git --version 如果是第一次使用Git,你需要设置署名和邮箱: $ git config --global user.name "用户名" $ gi ...

  3. Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合

    今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...

  4. FullCalendar应用——整合农历节气和节日

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...

  5. Atitit.attilax软件研发与项目管理之道

    Atitit.attilax软件研发与项目管理之道 1. 前言4 2. 鸣谢4 3. Genesis 创世记4 4. 软件发展史4 5. 箴言4 6. 使徒行传 4 7. attilax书 4 8. ...

  6. 在将 varchar 值 'xinpian' 转换成数据类型 int 时失败?

    把int类型的值修改为varchar类型的值

  7. SQL Server常见问题介绍及快速解决建议

    前言 本文旨在帮助SQL Server数据库的使用人员了解常见的问题,及快速解决这些问题.这些问题是数据库的常规管理问题,对于很多对数据库没有深入了解的朋友提供一个大概的常见问题框架. 下面一些问题是 ...

  8. 创建maven项目(cmd 命令)

    2016五月 22 原 创建maven项目(cmd 命令) 分类:maven (994) (0) 1.普通方式创建 1)进入cmd窗口执行 mvn archetype:generate 2) 光标停止 ...

  9. [转]ThinkPHP中实例化对象M()和D()的区别,select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  10. Johnson 全源最短路径算法

    解决单源最短路径问题(Single Source Shortest Paths Problem)的算法包括: Dijkstra 单源最短路径算法:时间复杂度为 O(E + VlogV),要求权值非负: ...