videojs 视频播放器从入门到精通

时间：2024-03-02 15:54:43

videojs 使用教程

@(视频)
(videojs官网)[http://docs.videojs.com/]

新手入门使用

你的第一个demo：

<head>
  <link href="http://vjs.zencdn.net/5.10.4/video-js.css" rel="stylesheet">
  <!-- 如果要支持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" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type=\'video/mp4\'>
    <source src="MY_VIDEO.webm" type=\'video/webm\'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="http://vjs.zencdn.net/5.10.4/video.js"></script>
</body>

入门使用：

1 通过 html 的类名和 data-setup初始化 视频播放器

  • step1 引入videojs 的相关库文件
<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
<script src="//example.com/path/to/video.min.js"></script>
<script>
    <!--f指出lash 播放视频的swf文件的路径-->
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
  • step2
    使用 h5 播放视频的是，你只需嵌入 video 标签，videojs 会让视频在所有浏览器中兼容播放。
    除了 vide 标签，你还需要设置：
    • data-setup videojs 会根据data－setup中的json参数来初始化视频播放器
    • 每个video 标签都应该id属性，且 id 属性在整个页面中是唯一的
    • class属性
      1)video-js类名字是必须的，因为videoj用这个类名做功能性操作，比如控制视频播放器皮肤的样式
      2）默认皮肤：vjs-default-skin

2动态载入html 设置视频播放器

//eleId的地方可以放置dom元素或者是 eleId 的选择器
videojs(\'eleId\',{
    //像data-setup那样设置的参数
},function(){
//视频播放器初始化完毕，就会调用这个回调函数
}

Options参数

直接嵌入一个video标签就可以构造一个videojs 的视频播放器。videojs 在设置参数上做了一些操作，使得你能够用h5 的video标准标签属性来设置初始化videojs播放器的初始化选项(options).
比如你这样初始化视频播放器选项：

<video controls autoplay preload="auto" ...>

就等价于：

<video data-setup=\'{ "controls": true, "autoplay": false, "preload": "auto" }\'...>

（ 注意：data－setup是json的数据格式）
一些属性：

  • preload
    auto: 立即加载视频的文件（如果浏览器允许），在ios设备上，会阻止自动加载。
    metadata：Load only the meta data of the video
    none：等待用户交互了才回加载视频文件

常见的基础API

//获取到返回回来到视频播放器
var videoPlayer = videojs(\'eleId\',{},function(){
    //手动设置视频播放器的视频源
    player.src(\'\')；
});
//播放与暂停播放
videoPlayer.play();
videoPlayer.pause();
//设置／获取视频的当前播放时间
videoPlayer.currentTime();
videoPlayer.currentTime(120);
//视频总的时常
videoPlayer.duration();

//获取或设置播放器的视频源
videoPlayer.src();
videoPlayer.src(\'www.baidu.mp4\')

//获取或者设置视频播放器的poster 图片
videoPlayer.poster();
videoPlater.poster(\'xxx.jpg\');

//

videojs的事件列表

durationchange
ended
error
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
timeupdate
volumechange
resize
绑定事件使用 on,比如

videoPlayer.on(\'play\',function(){
    
});

视频播放器皮肤调整

  • 实现响应式播放
.video-js {
    width: 80%;
   margin: 0 auto;
}
    
.video-js .vjs-tech {
    //这行代码最为关键，这样视频播放器的外层容器都由视频内容本身撑大
    position: relative;
}

有时候，videojs 会默认生成 style标签影响样式，
可以使用下面的代码来避免这个问题：

$(\'.vjs-styles-defaults\').remove();
$(\'.vjs-styles-dimensions\').remove();

这段js 代码也能避免视频黑框的问题

  • 实现视频播放按钮，暂停播放按钮和重播按钮点显示

  1. 居中显示视频播放器:给video标签添加类名：video-js vjs-big-play-centered

  2. 关于视

  • 视频播放按钮的样式的调整
.video-js .vjs-big-play-button {
调整按钮的大小，圆角率，

}
.video-js .vjs-big-play-button:before{
    //调整播放按钮中间的小三角型的大小
    font-size值是宽度的一半最为合适
}

居中显示视频播放器按钮的时候，调整样式让按钮居中显示
.vjs-big-play-centered .vjs-big-play-button ｛
｝

 .video-js {
     /*position: relative;*/
     width: 80%;
     margin: 0 auto;
 }
 
 .video-js .vjs-tech {
     position: relative;
 }
 
 .video-js .vjs-big-play-button {
     border-radius: 50%;
     width: 8em;
     height: 8em;
     line-height: 8em;
     font-size: 1em;
 }
 
 .video-js .vjs-big-play-button:before {
     font-size: 4.5em;
 }
 // 视频已经播放过了
 .vjs-has-started .vjs-big-play-button {
     /*display: block!important;*/
 }
 //视频播放过程中
 .vjs-playing .vjs-big-play-button {
     display: none;
 }
 //视频暂停播放
 .vjs-paused .vjs-big-play-button {
     display: block;
 }
 //视频播放结束了
 .vjs-ended .vjs-big-play-button {}
  • 针对手机进行的样式处理
    隐藏视频的播放按钮：
  *::-webkit-media-controls-panel {
        display: none!important;
        -webkit-appearance: none;
    }
    /* Old shadow dom for play button */
    
    *::--webkit-media-controls-play-button {
        display: none!important;
        -webkit-appearance: none;
    }
    /* New shadow dom for play button */
    /* This one works */
    
    *::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }

默认隐藏掉原生的视频播放按钮会带来一个问题：
在 ios 设备上，视频要点击vjs-big-play-button两次才能播放视频，目前sina网用的是原生的video标签，腾讯和搜狐用的是自己的移动端视频播放器。

在ipad上可以使用videojs作为视频播放器，ipad 上视频播放器的皮肤是奇效的。

整体度解决方案：
pc 和 tablet 设备，可以使用videojs作为视频播放器，移动端可以使用原生的和videojs，当在移动端使用videojs 的时候，需要针对ios设备隐藏掉 big-play-button.来避免上述带来的问题。

相关文章