Vue-videoJS播放m3u8视频

前言

找到一部分M3U8视频源，之前用H5 video 标签播放MP4视频，但是支持视频格式很少，索性换掉算了。

M3U8简单了解

引用维基百科：
M3U8是Unicode版本的M3U，用UTF-8编码。"M3U"和"M3U8 M3U8"文件都是苹果公司使用的HTTP Live Streaming格式的基础，这种格式可以在iPhone和Macbook等设备播放。

引用知乎：
上述文字定义来自于维基百科。可以看到，m3u8 文件其实是 HTTP Live Streaming（缩写为 HLS）协议的部分内容，而 HLS 是一个由苹果公司提出的基于 HTTP 的流媒体网络传输协议。

HLS 的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的 extended M3U (m3u8) playlist文件，用于寻找可用的媒体流。
HLS 只请求基本的 HTTP 报文，与实时传输协议（RTP）不同，HLS 可以穿过任何允许 HTTP 数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络来传输媒体流。

简单理解，M3U8其实就是视频文件碎片索引URL（类似于播放列表），播放器会解析并且下载这些视频碎片，拼接成一整个视频。MP4格式对HTTP和Flash都比较友好，但是MP4文件头部结果比较复杂，播放过程对网络带宽要求较高，在网络复杂的场景用户体验较差。

Vue集成

集成之前大致了解了下，网上比较多的是vue-video-player和videojs，我选择了后者（之前video标签转过来还是不能跨度太大，免得拉跨）。

这东西让我折腾挺久的，只能怪自己懒，好好的文档不看，到处搜，结果搜到一堆复制粘贴的垃圾文章，也不知道什么年代的了，结果发布日期全是今年的。

官方文档相当简洁，其实非常简单，文档在此tutorial-vue，一目了然。

说说我的情况吧！，官方文档是在mounted方法中初始化播放器，但是我的视频流是动态加载的，这样直接加载会报错：

CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media

因为我的视频地址和视频类型都没有请求，只能在请求完成之后再初始化播放器。

播放器已经封装成组件了，看代码。
安装videojs：

npm install --save video.js
npm install --save @videojs/http-streaming  //这个应该是不需要的，video.js在7.x就已经包含了，报错就还是加上吧，懒得试了

<template>
    <video ref="video" class="video-js" >
        <source :src="src" :type="video_type">
    </video>
</template>
    import Video from 'video.js'
    import '@videojs/http-streaming'
    import 'video.js/dist/video-js.css'  //css要加载
    export default {
        name: "playVideo",
        data: () => {
            return {
                player: null,
            }
        },
       props: {
            width: {
                type: Number,
                default: 0,
            },
            height: {
                type: Number,
                default: 0,
            },
            src: {
                type:String,
                default: '',
            },
            video_type: {
                type: String,
                default: 'video/mp4',
            }
        },
        watch: {
            video_type(){
                //监听props赋值，初始化播放器
                this.initVideo();
            }
        },
        beforeDestroy() {
            //销毁不能少啊！！！！！
            if (this.player) {
                this.player.dispose()
            }
        },
        methods: {
            pause() {
                this.$nextTick(function () {
                    // DOM 现在更新了
                    // `this` 绑定到当前实例
                    this.$refs.video.pause();
                })
            },
            initVideo() {
                //初始化视频方法
                this.player = Video(this.$refs.video, {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，
                    //启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: "muted",
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    //设置视频播放器的显示宽度（以像素为单位）
                    width: this.width,
                    //设置视频播放器的显示高度（以像素为单位）
                    height: this.height,
                    //网上很多没有用这个参数，默认获取<video><source src="" type=""/></video>
                    //标签中的 source中的链接和类型，手动指定就可以避免动态获取视频信息的坑
                    sources: {
                        src: this.src,  //视频地址
                        type: this.video_type //视频类型
                    }
                });
            }
        }
    }

结语

其实分分钟的是，搞了大半天。不过这个项目快一年没碰了，搞起来还有点懵逼。Graphql只用过一次，就是这项目上，Vue也好久没碰了，边熟悉边折腾，真是学无止尽啊。

Vue-videoJS播放m3u8视频

前言

M3U8简单了解

Vue集成

结语

评论 (0)