video.js

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>

截图:



posted on 2016-09-12 13:21 qize 阅读(...) 评论(...) 编辑 收藏

导航

公告