Vue播放m3u8各种实现方式

video.js -HTML5 视频播放器

dplayer官网

VLC 官网

插件 videojs

安装 videojs 插件

npm install --save video.js

导入插件

//全局导入，在main.js中导入
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$videojs = videojs

//局部导入，在对应文件导入（可选）
import videojs from "video.js";
import "video.js/dist/video-js.css";

使用

<template>
    <div class="myVideo">
        <video :id="id" class="video-js" preload="auto" controls playsinline autoplay="autoplay">
            <source :src="url" type="application/x-mpegURL" />
        </video>
    </div>
</template>
  
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
    name: 'HelloWorld',
    data() {
        return {
            db: null,
            options: {
                autoplay: false, // 设置自动播放
                muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
                preload: "auto", // 预加载
                controls: true, // 显示播放的控件
            },
            id: `videoPlayer${Date.now()}`,
            url: "https://live.cgtn.com/1000/prog_index.m3u8", // 播放视频的路径'
        };
    },
    mounted() {
        // 使用 $nextTick 解决vedio报错  The element or ID supplied is not valid. (videojs)
        this.$nextTick(() => {
            this.loadVideo(this.url);
        });
    },
    methods: {
        loadVideo(url) {
            this.db = videojs(this.id, this.options);
            // 也可以使用以下方式给vedio设置 src
            this.db.src([
                {
                    src: url, // 地址
                    type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
                },
            ]);
        },
        // 销毁
        beforeDestroy() {
            if (this.db) {
                this.db.dispose(); // dispose()会直接删除Dom元素
            }
        },
    }
}
</script>
<style scoped>
.myVideo {
    width: 100%;
}

video {
    width: 100%;
    height: auto;
}
</style>

插件 dplayer + hls

安装 videojs 插件

npm install -S dplayer
// 安装hls.js，播放Hls必须使用
npm install -S hls.js

导入插件

import Hls from "hls.js";
import DPlayer from "dplayer";

使用

<template>
    <div class="myVideo">
        <div ref="player" class="dplayer"></div>
    </div>
</template>
  
<script>
import Hls from "hls.js";
import DPlayer from "dplayer";
export default {
    data() {
        return {
            dp: null,
            value: undefined,
            img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg", // 视频封面
            url: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 播放视频的路径'
        };
    },
    created() {
        this.$nextTick(() => {
            this.loadVideo(this.url);
        });
    },
    methods: {
        // 播放器从开始下载到可以播放，dplayer延续H5 video的事件，依次会触发loadstart、durationchange、loadedmetadata、loadeddata、progress、canplay、canplaythrough。
        // 虽然直觉上是监听canplay，但是canplay在iOS上行不通，只能使用loadedmetadata。
        loadVideo(url) {
            this.dp = new DPlayer({
                element: this.$refs.player,
                loop: false,
                autoplay: true,
                video: {
                    pic: this.img, // 封面
                    url: url,
                    type: "customHls",
                    customType: {
                        customHls: function (video, player) {
                            console.log(player);
                            const hls = new Hls();
                            // 监听Hls.Events.ERROR事件，
                            // DNS解析、下载超时，都会触发manifestLoadError错误
                            hls.on(Hls.Events.ERROR, function (eventName, data) {
                                // 埋点上报，可以追踪data.details
                                // track()
                            })
                            hls.loadSource(video.src);
                            hls.attachMedia(video);
                        },
                    },
                }
            });
            // 监听loadedmetadata事件
            this.dp.on('loadedmetadata', function () {
                // 埋点上报
                // track()
            })
        },
    },
    // 销毁
    beforeDestroy() {
        if (this.dp) {
            this.dp = null
        }
    },
};
</script>
<style scoped>
.myVideo {
    width: 100%;
}

.dplayer {
    width: 100%;
    height: auto;
}
</style>

插件 hls

安装 videojs 插件

// 安装hls.js，播放Hls必须使用
npm install -S hls.js

导入插件

import Hls from "hls.js";

使用

<template>
    <div class="myVideo">
        <video class="hlsCss" ref="video" controls></video>
    </div>
</template>
  
<script>
let Hls = require('hls.js');
export default {
    data() {
        return {
            hls: ''
        };
    },
    mounted() {
        this.getStream('https://live.cgtn.com/1000/prog_index.m3u8');
    },
    methods: {
        loadVideo(val) {
            this.videoPause();
            this.getStream(val)
        },
        videoPause() {
            if (this.hls) {
                this.$refs.video.pause();
                this.hls.destroy();
                this.hls = null;
            }
        },
        getStream(source) {
            if (Hls.isSupported()) {
                this.hls = new Hls();
                this.hls.loadSource(source);
                this.hls.attachMedia(this.$refs.video);
                this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                    console.log('加载成功');
                    this.$refs.video.play();
                });
                this.hls.on(Hls.Events.ERROR, (event, data) => {
                    console.log(event, data);
                    // 监听出错事件
                    console.log('加载失败');
                });
            }
        },
        beforeDestroy() {
            this.videoPause();
        }
    }
};
</script>
<style scoped>
.myVideo {
    width: 100%;
}

.hlsCss {
    width: 100%;
    height: auto;
}
</style>

插件 video-player

插件 TCPlayerLite