微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

最近一个项目中需要在微信中播放m3u8格式的视频，刚开始用了 vue-video-player 这个插件，在IOS手机体验良好，本以为完事了， 结果安卓手机一点播放就自动全屏，心态略崩。查了资料说是安卓微信浏览器是X5内核与IOS的不同。折腾了好半天还是解决不了，心态已蹦。于是狠下心换个插件，便找到了video.js，港真，简直完美。

 1、首先安装，在你的vue项目中

npm install --save video.js
npm install --save videojs-contrib-hls

2、在你需播放视频的页面中

import \'video.js/dist/video-js.css\'
import videojs from \'video.js\'
import \'videojs-contrib-hls\'

3、HTML 如下：

<video id="my-video" class="video-js vjs-big-play-centered  vjs-default-skin" controls="" preload="none" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" x-webkit-airplay="allow" >
<source :src="tvPlayUrl" type="application/x-mpegURL">
</video>

注：上面红色的class是让播放按钮居中，默认是在左上方。

4、在 mounted 中设置一下中文，不然出错时提示英文不够友好

//videojs设置中文

videojs.addLanguage(\'zh-CN\', {
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
});

5、因为本人的地址是异步获取，所以在取得地址后：

var newUrl =‘假装我是个M3U8的视频地址‘;

_this.tvPlayUrl=newUrl; //给source的src赋值

var myPlayer = videojs(\'my-video\', {
     bigPlayButton: true, //是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
     textTrackDisplay: true,
     posterImage: true,
     errorDisplay: true,
     controlBar: true,
     autoplay:true,//这个说是自动播放，但是本人使用无效
     controls: true,
}, function () {
this.play()
})

myPlayer.src(newUrl);
myPlayer.load(newUrl);

以上就可以了，播放m3u8格式的视频，亲测安卓、IOS手机完美兼容且不会自动全屏。

以上是 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。 的全部内容， 来源链接： utcz.com/z/374940.html

回到顶部