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

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

  • 0 引言
  • 1 videojs介绍
  • 2 videojs选择
  • 3 videojs入门
    • 3.1 videojs简单引用
    • 3.2 完整代码
    • 3.3 播放器皮肤
  • 4 常用格式播放
    • 4.1 MP4
    • 4.2 MP3
    • 4.2 HLS (m3u8)
    • 4.3 播放 RTMP
    • 4.4 播放flv
  • 4 后记

0 引言

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

  • 没有原理性介绍,我不是这个工具的作者,写了也是抄的。
  • 没有太详细的操作步骤,操作步骤尽量指向官方文档。
  • 没有遇到的或者不值一提的,我都不会写上去。
作者 Daniel.Leung
组织 池鱼 - YiiGaa
邮箱 [email protected]
日期 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文件),不过最好还是把文件下载到本地(服务器)再进行使用,下载的话就是把下面的地址放到浏览器的地址栏再回车就行。



应用了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加载失败时显示内容

3.2 完整代码



    
        
        
        
    
    
        
    

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


4.2 MP3

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


4.2 HLS (m3u8)

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


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



    
        
        
        
        
    
    
        
    

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文件里再画一套播放器操作栏,这个我是放弃了。



    
        
        
        
        
        
    
    
        
    

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

4.3 播放 RTMP

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



    
        
        
        
        
    
    
        
    

4.4 播放flv

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



    
        
        
        
        
    
    
        
    

4 后记

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

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

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

你可能感兴趣的:(前端)