uni-app 引入video.js 支持H5播放m3u8、mp4格式视频
1、用npm命令行下载video.js插件库
npm install video.js
2、在项目main.js中引入
import Videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
Vue.prototype.$video = Videojs
3、在需要使用的页面中引入
<view class="video-js" ref="videos" style="width: 100%;height: 100%;" id="videosDiv"></view>
4、js代码
<script>
let video;
let source;
let videosDiv;
let player;
export default {
methods: {
selectVideoUrlList:function(){
this.playVedio(1,videoUrl);
},
playVedio:function(isFirst,url) {
let that = this;
if(player && player!=null){
player.dispose();
videosDiv = document.getElementById("videosDiv");
videosDiv.innerHTML='';
that.$forceUpdate();
}
video = document.createElement('video');
video.id = 'video';
video.style = 'width: 100%; height: 100%;';
video.controls = true;
video.preload = "auto"
video.setAttribute('playsinline', true)
video.setAttribute('webkit-playsinline', true)
video.setAttribute('x5-video-player-type', 'h5')
source = document.createElement('source');
source.src = url;
video.appendChild(source);
this.$refs.videos.appendChild(video);
player = this.$video('video', {
poster: '',
title: '4564564',
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoDisable: true,
preload: 'none',
language: 'zh-CN',
fluid: true,
muted: false,
aspectRatio: '16:9',
controls: true,
autoplay: true,
loop: true,
screenshot: true,
controlBar: {
volumePanel: {
inline: false
},
timeDivider: true,
durationDisplay: true,
progressControl: true,
remainingTimeDisplay: true,
fullscreenToggle: true,
pictureInPictureToggle: true,
}
}, function() {
this.on('error', function(err) {
console.log("请求数据时遇到错误", err)
});
this.on('stalled', function(stalled) {
console.log("网速失速", stalled)
});
});
},
},
changeVideoItem:function(item){
this.playVedio(0,item.videoUrl);
}
}
</script>