Videojs用法

来自Coolest guids on the palnet

Video.js 是一款HTML视频播放器框架。PC,平板和手机均可使用。

在线引入

在head中引入其css和js文件。

<link href="vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>

编写代码

  1. 这里有个工具可以生成video代码
  2. 也可以使用以下示例代码
<video id="example_video_1"  class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
</video>

必须给video添加video-js类,必须给video添加data-setup属性

响应式

给video添加类vjs-16-9或者vjs-4-3

<video id="myvideo" class="video-js vjs-default-skin vjs-16-9" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
</video>

或者直接这样

data-setup='{"fluid":true}'

居中

给video添加类vjs-big-play-centered

分辨率切换

$("video").parent().toggleClass("vjs-4-3").toggleClass("vjs-16-9")

添加新评论