使用videojs播放m3u8视频

Posted 2023-04-06 深巷的九

vue3使用videojs 播放m3u8格式视频

videojs是一个播放视频的js库，可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件
m3u8是一个文本文件(播放列表文件)，里面的内容就是被播放的音视频文件路径或网址。存放了视频的基本信息和分段视频的索引地址。就是按顺序下载播放索引列表的视频，从而完成一部完整视频的播放。
先在项目中安装videojs。

npm install --save video.js
npm install --save videojs-contrib-hls

下载成功后在项目的package.json文件中，有这两行代码。

在需要播放视频的页面中引入videojs

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

在vue页面中加入video标签。
class="video-js vjs-default-skin"是videojs自带的样式需要加上，否则视频样式会有问题，style="width: 100%;height: 100%; object-fit: fill" 这行代码是为了使视频占满div容器。

 <div class="vedio">
      <video id="valveVideogj" class="video-js vjs-default-skin" autoplay
             style="width: 100%;height: 100%; object-fit: fill"></video>
</div>

在onMounted节点初始化播放器。
videojs函数有三个参数，分别为video标签id(id必须要唯一)，要实例化的videojs配置，以及回调函数。options(rtsp)函数，rtsp为视频地址。http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8(网上找的m3u8格式视频)

  function options(src) 
            return 
                autoplay: true, // true,浏览器准备好时开始播放。
                muted: true, // 默认情况下将会消除音频。
                loop: true, // 导致视频一结束就重新开始。
                controls: false, //取消视频中的进度条
                preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',  //汉化
                fluid: true, // 当true时，将按比例缩放以适应其容器。
                sources: [
                    type: 'application/x-mpegURL',
                    src  //视频播放地址
                ],
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
                textTrackDisplay: false,
            
        

  let player;
  onMounted(() => 
		try 
                player = videojs("valveVideo", options(rtsp), () => 
                    player.play();
                  
                );

             catch (error) 
                console.log(error);
            	
           
    	)  

播放效果图


视频的大小可以通过改变外层div容器的大小来改变。

.vedio 
	width: 632.89px;
  	height: 356px;
    background: #000;
    padding: 3px;
    border: 1px solid #707070;
    margin: 30px 30px 0 30px;

ps
从其他页面返回到该页面会碰到video.es.js:228 videojs: warn: player "valvevideogj" is already initialised. options will not be applied.错误
则是因为播放器已经初始化过了，不能重复调用video标签作用于同一个video id，需要离开页面是销毁video，再重新初始化。

        onUnmounted(() => 
            //离开页面时销毁video
            player.dispose()
        )

网页中加入视频播放组件，并使用ffmpeg对视频转编码

网页加入视频可以用h5自带的video标签，这里用一个jQuery封装优化好的video视频组件videojs。

videojs官方网站：https://docs.videojs.com/index.html

videojs下载：https://github.com/videojs/video.js/releases

这里有个问题是h5的video标签只支持三种编码的视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

通常我们使用MP4格式，但是MP4又分为“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三种类型。要想在h5播放成功，必须转换视频格式为H264才可以，好多做法是用格式工厂来转换，这样工作量大，比较麻烦，这里选择直接用ffmpeg来进行转码 ：

1.安装ffmpeg需要安装下面三个包：

1. yasm：是一个汇编器，ffmpeg需要用到。
2. X264：x264是采用GPL授权的视频编码自由软件。x264的主要功能在于进行H.264/MPEG-4 AVC的视频编码，而不是作为解码器（decoder）之用
3. ffmpeg主要用于音视频转码，以及增删水印等处理，是一款简单实用且强大的音视频处理工具。

（1）.安装yasm

wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xzvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
make install

 

(2).x264安装

为了让ffmpeg使用h264编码。

ffmpeg中自带h264的解码，但是没有包含编码，所以再执行avcodec_find_encoder(CODEC_ID_H264)时返回的结果为NULL，需要额外添加x264支持h264的编码。

下载到这里：

https://code.videolan.org/videolan/x264/tree/stable

选择下载：

wget https://code.videolan.org/videolan/x264/-/archive/stable/x264-stable.tar.gz

编译/部署：

解压压缩包，cd进目录

./configure  --disable-asm

make

sudo make install

 

（3）安装ffmpeg

官网下载：http://ffmpeg.org/download.html

wget https://ffmpeg.org/releases/ffmpeg-4.1.3.tar.bz2

解压：

bzip2 -d ffmpeg-4.1.3.tar.bz2

tar -xvf ffmpeg-4.1.3.tar

./configure --enable-libx264

make

sudo make install

 ffmpeg完整安装请参考：https://www.cnblogs.com/wanghetao/p/3386311.html

2.用ffmpeg将视频转为html5支持的编码：

      (1)转码成ogv (Theora 1 Vorbis): .

      ffmpeg -i WTE.mp4 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30    output.ogv

      (2)转码成webm (VP8 / Vorbis):

      ffmpeg -i WTE.mp4 -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 output.webm

      (3)转码mp4 (H.264 / ACC):

      ffmpeg  -i WTE.mp4 -b 1500k -vcodec 1ibx264 -vpre slow -vpre baseline -g 30 output.mp4
　　

　　参考自：https://www.doc88.com/p-7088891528596.html

HTML中一次加入三种格式：

 <video id="my-video" loop =‘true‘ class="video-js" controls preload="auto" width="500" height="400"
          poster="{% static  ‘images/m.jpg‘ %}" data-setup="{}" autoplay="autoplay">
        <source src="{{ MEDIA_URL }}video/output.mp4" type="video/mp4">
        <source src="{{ MEDIA_URL }}video/output.webm" type="video/webm">
        <source src="{{ MEDIA_URL }}video/output.ogv" type="video/ogg">
        <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>

 至此就可以在h5中流畅无阻地播放视频了

 

以下简单总结下ffmpeg命令参数：

-i 指定要转换视频的源文件
-s 视频转换后视频的分辨率
-vcodec 视频转换时使用的编解码器（-codecs）
-r 视频转换换的桢率(默认25桢每秒)
-b 视频转换换的bit率
-ab 音频转换后的bit率(默认64k)
-acodec 制度音频使用的编码器（-codecs）
-ac 制定转换后音频的声道

-ar 音频转换后的采样率

-an 禁用音频

-vn 禁用视频

-acodec copy 复制音频，不转码

-vcodec copy 复制视频，不转码