videojs 的学习

作者 johansen 日期 2017-07-05
技术小记
videojs 的学习

最近在看直播相关的H5的技术实现，目前有些原生不支持hls直播协议，所以就得使用一些插件，今天我来介绍一个videojs的插件。主要介绍相关插件的HSL部分。

安装与初始化

  1. videojs-contrib-hsl.js 需要依赖于 video.js 因此在页面引用的过程中需要先加载videojs。
  2. 初始化插件，我们需要videojs(videoElem),返回一个player。

videojs相关的API

首先先看一下栗子：

1
2
3
4
5
6
7
8
9
<video id="example-video" width=600 height=300 class="video-js vjs-default-skin" controls data-setup="{}">
    <source src="https://example.com/index.m3u8"type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
    var player = videojs('example-video');
    player.play();
</script>

使用：

  • 1.通过html的类名和 data-setup初始化视频播放器。
  • 2.使用 h5 播放视频,你只需嵌入 video 标签，videojs 会让视频在所有浏览器中兼容播放。
    除了 video 标签，你还需要设置：data-setup, videojs会根据data－setup中的json参数来初始化视频播放器
    每个video 标签都应该id属性，且 id 属性在整个页面中是唯一的
    注意：
    1)video-js类名字是必须的，因为videoj用这个类名做功能性操作，比如控制视频播放器皮肤的样式
    2）默认皮肤：vjs-default-skin
  • 3.动态载入html设置视频播放器
    1
    2
    3
    4
    5
    6
    //eleId的地方可以放置dom元素或者是 eleId 的选择器
    videojs('eleId',{
        //像data-setup那样设置的参数
    },function(){
    //视频播放器初始化完毕，就会调用这个回调函数
    }

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

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

等价于：

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

  • 1.preload:
    auto: 立即加载视频的文件（如果浏览器允许），在ios设备上，会阻止自动加载。
    metadata：Load only the meta data of the video
    none：等待用户交互了才回加载视频文件
  • 2.常见的基础API
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    //获取到返回回来到视频播放器
    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');
    //缓冲
    myPlayer.buffered();
    //百分比的缓冲
    myPlayer.bufferedPercent();
    //声音大小
    myPlayer.volume(0.5);
    //设置视频容器大小
    myPlayer.size(640,480);
    //进入视频全屏
    myPlayer.enterFullScreen();
    //

videojs基本事件

  • durationchange：视频时长改变了（只有视频加载后，时长会由“NaN”变成音频/视频的实际时长）
  • ended：视频播放结束（currentTime == duration）
  • error:视频加载期间出错
  • fullscreenchange：进入/退出全屏状态
  • loadeddata：当浏览器已加载视频的当前帧时
  • loadedmetadata：当浏览器已加载视频的元数据时
  • loadstart：当浏览器开始查找视频时，开始加载
  • pause：视频暂停
  • play：视频播放
  • progress：下载视频
  • timeupdate：播放位置更改时
  • volumechange：音量已经更改

关于videojs自定义样式问题的研究

例如：大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式：

1
2
3
4
5
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
</video>

也可以重写样式 .video-js .vjs-big-play-button{/这里的样式重写/}。

对于动态加载的HTML元素设置Video.js
如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点，首先将 data-setup 属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 javascript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后。

1
2
3
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});

videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。第三个参数是一个 ‘ready’ 回调。一旦 Video.js 初始化完成后，就会触发这个回调。你也可以传入一个元素本身的引用来代替元素ID:

1
2
3
4
5
6
7
videojs(document.getElementById('example_video_1'), {}, function() {
// This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
// You can grab an element by class if you'd like, just make sure
// if it's an array that you pick one (here we chose the first).
});

事件绑定

1
2
3
4
5
6
myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.off("pause", function(){
    console.log("pause")
});
FEATURED TAGS
技术小记