前端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><divclass="myVideo"><videoid="videoPlayer"class="video-js vjs-default-skin"controlsplaysinlineautoplay="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";exportdefault{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><stylelang="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><divclass="preview"><divclass="videoArea"><videoid="videoElement"crossOrigin="anonymous"controlsautoplaymutedwidth="100%"height="800px"></video></div></div></template><script>import flvjs from'flv.js'exportdefault{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><stylelang="scss"scoped></style>

3、mp4格式的方案来播放视频

<html><head><title>camera</title><scripttype="text/javascript">functionplay(){var video = document.getElementById("video");
        video.play();}</script></head><body>
    <video 
        id="video" 
        width="640" 
        height="360"  
        poster="/video/cover.png"// 视频封面
        controls //显示标准的 HTML5 视频/音频播放器控制条、控制按钮。
        autoplay //让文件自动播放。
        loop //让文件循环播放。
        preload="auto" //属性是用来缓存大体积文件的。它有三个可选值："none" 不缓存、"auto" 缓存、"metadata" 只缓存文件元信息
        playsinline="true" // IOS微信浏览器支持小窗内播放
        webkit-playsinline="true" // 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/ 
        x5-video-player-type="h5" // 启用H5播放器，是wechat安卓版特性
        x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
        x5-video-orientation="portraint" // 播放器屏幕的方向，landscape横屏，portraint竖屏，默认值为竖屏。、、
        οnclick="play()" > 
         <!-- 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个<source></source>元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放Ogg文件。 --><!-- codecs=dirac, speex - 是用来指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频。 --><sourcesrc="/video/text.mp4"type="video/mp4"><sourcesrc="/video/text.ogg"type="video/ogg; codecs=dirac, speex"><divclass="fallback"><p>You must have an HTML5 capable browser.</p></div></video></body></html>

标签：前端 vue.js 音视频

本文转载自: https://blog.csdn.net/weixin_43883951/article/details/131065700
版权归原作者 NIshihara 所有，如有侵权，请联系我们删除。

前端vue播放m3u8、flv、mp4视频的方法

1、播放m3u8格式视频

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

3、mp4格式的方案来播放视频

发表评论

“前端vue播放m3u8、flv、mp4视频的方法”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航