vue+videojs+微信移动端的一些问题

vue+videojs视频播放移动端总结

---

说明

项目需要在微信公众号中播放视频,也可以使用 vue-video-player 插件来处理,这里使用videojs来处理,以及一些遇到的问题/

---

一、videojs使用

videojs在vue的基本使用方法🐇

二、video在移动端微信中横屏显示

1. h5新属性

<video
    ref="video"
    id="my-video"
    class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    controlsList="nodownload" // 添加隐藏下载按钮
    disablePictureInPicture  // 隐藏画中画
    preload="auto"
    x5-playsinline="true"
    x-webkit-airplay="true"
    x5-video-player-type="h5"  // 先添加h5属性才可以设置横屏
    x5-video-player-fullscreen="true"  //全屏显示(但不添加landscape画面不会横屏
    x5-video-ignore-metadata="true"
    x5-video-orientation="landscape"  // 默认是竖屏,自主添加landscape属性横屏
  >

2. 获取屏幕宽高

监听video全屏事件, 监听屏幕宽高, 当点击全屏时, 将video的宽设置屏幕的高这种( 有点麻烦,我比较懒惰
点击横屏全屏显示🐇

三、不播放时先点全屏会黑屏

this.myplayer = this.$video("my-video", {}, function() {
// 本来打算监听视频未播放,禁用全屏按钮,但是用这个就完全处理好了
// 监听视频是否播放
      this.on("play", function() {
        console.log("1111");
      });
    });

附带videojs一些监听事件的汇总🐇

四、视频加载失败

做移动端(微信), 永远不要相信PC端的展示效果, 一般获取后端链接可以直接在PC端正常展示, 但是手机端会有各种问题, 一定要相信是后端的问题, 我出的问题是后端将视频配到了含有权限的文件目录下,导致不能播放, 当然网上也有很多转换格式的做法, 此处不计入.

---

总结

提示：做的时候怪痛苦的, 搞忘记还有哪些问题了, 有机会再补充