在微信里打开网页，video视频出现问题，video.js插件解决 |
您所在的位置：网站首页 › 微信网页版无法下载小视频怎么解决 › 在微信里打开网页，video视频出现问题，video.js插件解决 |
|
在调试的过程中，发现电脑端，手机端在谷歌中打开是没有问题的。但是在微信里打开页面出现问题。 分析：微信自带的内嵌浏览器是X5内核，而谷歌的内核是Webkit，video在X5内核里有兼容性的问题。 通过https://juejin.cn/post/6844903825002725383#heading-3博客发现可以解决ios的兼容性问题： document.addEventListener( "WeixinJSBridgeReady", () => { this.video.play(); }, false ); // 兼容微信自动播放但是android的还是不兼容。经过不断尝试和发现，找到了一个比较好的框架video.js插件： 参考文章：https://juejin.cn/post/6844903975766982663 解决办法： 备注：微信自带的浏览器内核是x5，由于自带的安全机制，不能让其自动播放，所以必须要加上底部控制栏，用来控制它的播放和暂停。 1.安装 npm install --save video.js2.main.js中引入 import Video from "video.js"; import "video.js/dist/video-js.min.css" Vue.prototype.$video = Video3.在组件中使用。在video标签里的class里加入vjs-big-play-centered可以使播放按钮居中显示。 export default { name: "VideoPlayer", data() { return { player: null }; }, mounted() { // 播放参数 let options = { controls: true, // 是否显示底部控制栏 preload: "auto", // 加载标签后是否加载视频 autoplay: "muted", // 静音播放 // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放 //width: "640", //height: "247", controlBar: { // 自定义按钮的位置 children: [ { name: "playToggle" }, { name: "progressControl" }, { name: "currentTimeDisplay" }, { name: "timeDivider" }, { name: "durationDisplay" }, { name: "volumePanel", // 音量调整方式横线条变为竖线条 inline: false }, // { // name: "pictureInPictureToggle" //画中画播放模式 // }, { name: "fullscreenToggle" } ] } }; this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() { console.log('onPlayerReady', this); }); }, beforeDestroy() { if (this.player) { this.player.dispose() } }, methods: { } }; .video_box { margin: 10px; width: 99%; height: 450px; } .video-js { width: 100%; height: 450px; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |