前端vue播放m3u8、flv、mp4视频的方法
1、播放m3u8格式视频
- 安装依赖
npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls --save // 播放hls流插件 - 页面引入插件
import videojs from "video.js";
import "video.js/dist/video-js.css";
- 页面中的使用
<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: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度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报错 The element or ID supplied is not valid. (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元素}},},
};
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>
2、flv格式的方案来播放视频
简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。
开源地址: https://github.com/Bilibili/flv.js/
- 安装依赖
npm install --save flv.js - 页面引入插件
import flvjs from 'flv.js'
- 页面中的使用
<template><div class="preview"><div class="videoArea"><video id="videoElement" crossOrigin="anonymous" controls autoplay muted width="100%" height="800px">video>div>div>
template><script>import flvjs from 'flv.js'export default {data() {return {isPlay: false,player: null,};},methods: {// 设置视频配置(注意：createVideo应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)createVideo() {if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');this.player= flvjs.createPlayer({type: 'flv',isLive: true,hasAudio: false,url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv' // 自己的flv视频流},{cors: true, // 是否跨域// enableWorker: true, // 是否多线程工作enableStashBuffer: false, // 是否启用缓存stashInitialSize: 128, // 缓存大小(kb) 默认384kbautoCleanupSourceBuffer: true // 是否自动清理缓存});this.player.attachMediaElement(videoElement);//挂载元素this.player.load();//加载流this.player.play();//播放流}// 报错重连this.player.on(flvjs.Events.ERROR, (err, errdet) => {// 参数 err 是一级异常，errdet 是二级异常if (err == flvjs.ErrorTypes.MEDIA_ERROR) {console.log('媒体错误')if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {console.log('媒体格式不支持')}}if (err == flvjs.ErrorTypes.NETWORK_ERROR) {console.log('网络错误')if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {console.log('http状态码异常')}}if(err == flvjs.ErrorTypes.OTHER_ERROR) {console.log('其他异常：', errdet)}if (this.player) {this.destoryVideo()this.createVideo()}})},destoryVideo(){if (this.player) {this.player.pause();// 暂停播放数据流this.player.unload();// 取消数据流加载this.player.detachMediaElement();// 将播放实例从节点中取出this.player.destroy(); // 销毁播放实例this.player= null;}}},mounted() {this.$nextTick(() => {this.createVideo()})},beforeDestroy() {this.destoryVideo()},};
script>
<style lang="scss" scoped>style>
3、mp4格式的方案来播放视频
<html><head><title>cameratitle><script type="text/javascript">function play() {var video = document.getElementById("video");video.play();} script>head><body>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！