h5+vant的视频播放横屏

参考网址：
https://github.com/videojs/video.js
https://github.com/surmon-china/vue-video-player
https://www.freesion.com/article/4875170880/
https://www.npmjs.com/package/videojs-landscape-fullscreen
参考博客

videojs官网地址：
https://videojs.com/getting-started/
https://docs.videojs.com/

视频的横屏播放需要在手机上才能显示，电脑上模拟不行。

<template>
  <div class="test-videojs">
    <van-nav-bar @click-left="attentionback">
      <template #title>
        <span class="title">详细信息</span>
      </template>
      <template #left>
        <van-icon name="arrow-left" color="#fff" />
      </template>
    </van-nav-bar>
    <video
      id="videoPlayer"
      class="video-js vjs-default-skin"
      muted
      controls="controls"
      controlslist="nodownload nofullscreen noremoteplayback"
      x5-video-player-type="h5"
      x5-video-orientation="landscape"
    ></video>
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
// import screenfull from "screenfull";
import "videojs-landscape-fullscreen";
export default {
  data() {
    return {
      //  https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
      // 是一段视频，可将cctv1 （是live现场直播，不能快退）的替换为它，看到快进快退的效果
      // http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
      nowPlayVideoUrl:
        "https://test-1308727152.cos.ap-shanghai.myqcloud.com/video/cb4514c0382eebabc0004b7f1b5b3207.mp4",
    };
  },
  mounted() {
    this.initVideo(this.nowPlayVideoUrl);
  },
  methods: {
    initVideo(nowPlayVideoUrl) {
      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
        autoplay: true, // 设置自动播放
        controls: true, // 显示播放的控件
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
        playbackRates: [0.5, 1, 1.25, 1.5, 2], // 倍速播放
        sources: [
          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
          {
            // src: nowPlayVideoUrl,
            src: nowPlayVideoUrl,
            // type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
            type: "video/mp4", // 告诉videojs,这是一个hls流
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
      };
      // videojs的第一个参数表示的是，文档中video的id
      const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
        console.log(myPlyer === this); // 这里返回的是true
        myPlyer.landscapeFullscreen({
          fullscreen: {
            enterOnRotate: true,
            exitOnRotate: true,
            alwaysInLandscapeMode: true,
            iOS: true,
          },
        });
        return myPlyer;
      });
    },
    attentionback() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #ff9966;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.title {
  color: #fff;
  font-size: 20px;
}
#videoPlayer {
  width: 375px;
  height: 300px;
  margin-top: -20px;
  // margin: 50px auto;
}
.vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  margin-top: -1px;
  margin-left: -1.5;
}
</style>