Web网页播放器制作(videojs7)-(一)入门

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.jsvideojs-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,是因为大众代表可以百度,开源代表免费、当然也代表我们碰到问题的时候还可以上手改造。其实,就一句话,好用又免费。

发布了6 篇原创文章 · 获赞 0 · 访问量 2544
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览