2024年Web前端最新前端vue播放m3u8、flv、mp4视频的方法_vue mp4，吊打面试官 redis

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

aspectRatio:‘16:9’,
notSupportedMessage: ‘此视频暂无法播放，请稍后再试’, //允许覆盖Video.js无法播放媒体源时显示的默认信息。
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报错TheelementorIDsuppliedisnotvalid.(videojs)this.$nextTick(() => {
this.loadVideo();
});
},
methods: {
loadVideo() {
this.dp = 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元素
}
},
},
};

### 2、flv格式的方案来播放视频


简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。  
 开源地址: https://github.com/Bilibili/flv.js/


1. 安装依赖  
 `npm install --save flv.js`
2. 页面引入插件

import flvjs from ‘flv.js’

3. 页面中的使用