vue使用原生video播放m3u8格式的视频

1、安装依赖

npm install video.js --save // 视频播放器插件npm install videojs-contrib-hls --save // 播放hls流插件

2、页面引入插件（这里我是页面单独引入，减少项目体积）

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

3、页面中的使用

<template><div class="myVideo"><video id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px"><source :src="attachmentLink" type="application/x-mpegURL" /></video></div></template><script>import videojs from "video.js";import "video.js/dist/video-js.css";export default {data() {return {dp: null,options: {autoplay: false, // 设置自动播放muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）preload: "auto", // 预加载controls: true, // 显示播放的控件},attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8",};},mounted() {// 使用 $nextTick 解决vedio报错 The element or ID supplied is not valid. (videojs)this.$nextTick(() => {this.loadVideo();});},methods: {loadVideo() {this.db = videojs("videoPlayer", this.options);// 也可以使用以下方式给vedio设置 src// this.db.src([// {// src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流// },// ]);},// 销毁beforeDestroy() {if (this.dp) {this.dp.dispose(); // dispose()会直接删除Dom元素}},},};</script><style lang="less" scoped>.video-box {width: 100%;max-width: 500px;max-height: 500px;}// 暂停播放按钮居中::v-deep .video-js .vjs-big-play-button {top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>

常见问题

问题： 首次打开视频弹出框报：The element or ID supplied is not valid. (videojs)错误 *原因： videojs找不到需要初始化的playerID，页面未找到相应组件 解决方法： 延迟加载。 例如：

  1. 使用 this.$nextTick
  2. 放在mounted钩子函数里
  3. 使用setTimeout
  4. …