Web网页播放器制作（videojs7）-（一）入门

温开畅

2023-12-01

0 引言

在前面的《Web网页播放器简述》中已经介绍过Web网页播放器的相关知识。2016年基于某种原因，我与音视频产生了关系，因为当时是从制作播放期开始的，所以我也以播放器制作为我技术博客的开端。这篇文章我们正式进入网页播放器的制作阶段，我们将会以开源的viedojs为基础制作播放器。此博客秉承以下原则：

没有原理性介绍，我不是这个工具的作者，写了也是抄的。
没有太详细的操作步骤，操作步骤尽量指向官方文档。
没有遇到的或者不值一提的，我都不会写上去。

作者	Daniel.Leung
组织	池鱼 - YiiGaa
邮箱	YiiGaa@126.com
日期	2019-06-01

1 videojs介绍

Videojs是一个基于JavaScript的HTML5视频播放器，当浏览器不支持时自动切换成Flashplayer播放器。支持H.264、Theora OGG和Google WebM格式。它没有依赖任何JavaScript框架，支持全屏播放和音量控制。支持HTML5和Flash的播放技术切换。
以上都是优点，但是实际使用过程中，会有各种各样的问题。

官网：https://videojs.com/
这应该是目前比较值得使用的开源播放器了，也是我使用深度最高的一个。

2 videojs选择

一般的Base选择都是慎重的，一般来说确实选错了Base会对以后的开发或者整体的软件产品质量会产生不可挽回的影响，然后当我们选择播放器Base的时候，会有各种对比（如播放倍数，广告位置等），权衡哪一个播放器会让开发量减到最低。确实，如果说音视频在系统中是处于最边缘功能的话，选用一个功能最贴切的播放器就可以了。可如果音视频在系统中是处于比较重要位置的话，那么播放器的选择就反而显得不太重要了，因为重要往往代表着将会有大量的定制内容（如进度条，图标，功能等），所以无论你选择哪一种播放器，它都只沦为单纯的播放器（只含有播放功能）。在音视频处于比较重要的地位时，我们只要选择一个大众的，开源的，流行的播放器就可以了，如videojs。

回顾一开始对videojs的选择，确实没有过多的考量，仅仅因为它足够大众和它是开源的，后来使用也没有太多的问题。

这里就不列出videojs所支持的个格式和功能了，方正后面的播放器制作系列文章会带有mp4，hls，flv，rtmp等格式的对应手段。

3 videojs入门

我们以videojs7作为播放器Base，以后如果Base有更新，看心情更新。

3.1 videojs简单引用

首先需要在页面引用videojs的js和css文件，可以使用下面cdn地址引用（下面地址是最新版的videojs文件），不过最好还是把文件下载到本地（服务器）再进行使用，下载的话就是把下面的地址放到浏览器的地址栏再回车就行。

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

应用了videojs必须的文件之后，我们在html把video加上去，下面代码的属性说明

class=“video-js”：引用videojs的css
poster：封面图地址
data-setup：videojs其他参数，如果没什么要求的话，这个属性去掉也是可以的
src：视频的地址
type：视频对应的格式，mp4对应video/mp4，webm对应webm，ogv对应video/ogg，hls对应xxx
‘’
’’：videojs加载失败时显示内容

<video id="my-player" class="video-js" controls preload="auto" data-setup='{}'poster="//vjs.zencdn.net/v/oceans.png" >
	<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
	<p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

3.2 完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    </head>
    <body>
        <video id="my-player" class="video-js" controls preload="auto" data-setup='{}'poster="//vjs.zencdn.net/v/oceans.png" >
            <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>
    </body>
</html>

3.3 播放器皮肤

videojs可以替换皮肤的，当然也可以开发皮肤，https://docs.videojs.com/tutorial-skins.html。这个我没做过，也不希望做（这样的话与videojs就强关联的，黑话就高耦合），这里就不多做介绍了。以下插件都可以在github搜索到，具体地址我就不写了。

4 常用格式播放

播放不同格式，基本上是上述例子中标签的修改。如有其它修改会特别说明。如果你想支持IE11以下，就不能用video7了，可以用video6，4.2 HLS (m3u8)里有说明。后续会一步一步做一个自定义的播放器操作栏。

4.1 MP4

上述入门例子就是mp4播放的例子，source的src属性值为mp4的路劲，type属性值为video/mp4

<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>

4.2 MP3

上述入门例子就是mp4播放的例子，source的src属性值为mp4的路劲，type属性值为video/mp4

<source src="mp3的路劲.mp3" type="audio/mp3"></source>

4.2 HLS (m3u8)

HLS封装的视频播放，videojs7默认包含hls插件，不需要引入其它插件。videojs7以下需要引入videojs-contrib-hls.js插件。

<source src="hls的路劲.m3u8" type="application/x-mpegURL"></source>

videojs7以下引入videojs-contrib-hls.js完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
        <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
    </head>
    <body>
        <video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
            <source src="hls的路劲.m3u8" type="application/x-mpegURL"></source>
        </video>
    </body>
</html>

IE 11 以下，需要播放hls的话，videojs7的js有一个数据类型不支持（其实是videojs7包含了videojs-contrib-hls.js，而videojs-contrib-hls.js含有ie11以下不支持的数据类型），会加载失败的，所以videojs只能降版本，引用videojs6，再引入videojs-flash.min.js和videojs-flashls-source-handler.js，用flash播放hls。

另外，这里我们需要设置一个swf文件路劲，因为videojs-flash.min.js包含的swf文件是不支持hls解码的，需要引入新的videojs-flashls-source-handler.js的swf文件，swf的下载地址：https://unpkg.com/@brightcove/videojs-flashls-source-handler/dist/video-js.swf，引入方法：在data-setup中设置swf文件位置，data-setup=’{“flash”:{“swf”:"./video-js.swf"}}’（./video-js.swf为文件路劲）。

IE11以下播放hls是比较麻烦的，我当时也是在看，videojs/http-streaming这个插件的说明时发现的。说到这里，IE11以下还有一个更大的坑，IE11以下没有fullscreen的接口，就是没法把某个dom元素像chrome一样全屏，如果想要在IE11下让播放器全屏，只能通过Flash播放器（swf文件）全屏，而且你还要在swf文件里再画一套播放器操作栏，这个我是放弃了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flashls-source-handler@1/dist/videojs-flashls-source-handler.js"></script>
    </head>
    <body>
        <video id="my-player" class="video-js" controls preload="auto"  poster="//vjs.zencdn.net/v/oceans.png" data-setup='{"flash":{"swf":"./video-js.swf"}}' >
            <source src="./hls/index.m3u8" type="application/x-mpegURL"></source>
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>
    </body>
</html>

videojs也可以指定用flash播放器播放，这个以后会说到。

4.3 播放 RTMP

rtmp只能用flash播放，目前没有html5的方式播放rtmp(包括其他播放器)，需要引入videojs-flash.min.js，source的type属性为rtmp/flv

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
    </head>
    <body>
        <video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
            <source src="rtmp://rtmp的路劲" type="rtmp/flv"></source>
        </video>
    </body>
</html>

4.4 播放flv

video播放flv用的是flash，当然也可以直接用flv.js以html5的方式播放flv视频，这里介绍videojs的用法，需要引入videojs-flash.min.js，source的type属性为video/flv

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
    </head>
    <body>
        <video id="my-player" class="video-js" controls preload="auto" data-setup='{}'>
            <source src="flv的路劲.flv" type="video/flv"></source>
        </video>
    </body>
</html>

4 后记

想要简单实用videojs的话就是这么简单了，但是随着现今信息载体逐渐从图文转换到音视频，播放器的要求会越来越高，用户已经不允许我们用千篇一律的播放器来敷衍了。所以，别天真，会这么引用videojs就完事了，我们还有很长的路要走。

网页播放器由于音视频解码器是不可修改的，所以只能支持H264/ACC编码的音视频，理所当然的，也不是所有封装格式（avi/mov/mp4等）都能播放的。所以，媒资管理系统（VMS）应运而生，它的其中一种应用就是把千差万别的视频转变成适应Web播放的格式和编码。不过目前VMS还没有一个固定形态，后续我会做一个相关的编写文章。

最后啰嗦两句，我之所以趋向选择大众的、开源的Base，是因为大众代表可以百度，开源代表免费、当然也代表我们碰到问题的时候还可以上手改造。其实，就一句话，好用又免费。