商品详情页面-（第一张含有m3u8视频）

1、需求:

商品详情页面轮播图，内容有视频或者图片，如果有视频，则第一个显示，并在播放时关闭图片轮播。手动切换轮播图，自动停止播放视频。

2、技术：

Vue+Vant(van-swipe,van-swipe-item)+video.js

3、实现

 <van-swipe :autoplay="autoplaySwipe" indicator-color="white" :lazy-render="false" @change="nextSwipe">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <video v-show="image==''" id="my-video" class="video-js vjs-default-skin mon-width100 mon-height-750"
               controls=""
               preload="none"
               x5-playsinline="" playsinline=""
               webkit-playsinline="" poster="" x-webkit-airplay="allow">
          <source src="tvPlayUrl" type="application/x-mpegURL">
        </video>
        <img v-show="image!=''" class="mon-width100 mon-height-750" v-lazy="image"/>
      </van-swipe-item>
    </van-swipe>

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

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

 data() {
    return {
      autoplaySwipe: 3000,
      images: [
        '',
        'https://.jpg',
        'https://.jpg',
        'https://.jpg',
        'https://.jpg',
        'https://.jpg',
      ],
      videoOptions: {
        bigPlayButton: true, //是否显示播放按钮(这个播放按钮默认会再左上方，需用CSS设置居中)
        textTrackDisplay: true,
        posterImage: true,
        errorDisplay: true,
        controlBar: true,
        autoplay: true,//这个说是自动播放，但是本人使用无效
        controls: true,
        loop: false, // 是否循环播放
        language: 'zh-CN'
      },
    };
  },

mounted(){
    // 设置Video.js语言
    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.": "无法找到此视频兼容的源。",
    });
}

  methods: {
    // 手动切换轮播图
    nextSwipe() {
      let myPlayer = videojs('my-video')
      // 切换轮播图暂停播放视频
      myPlayer.pause()
    },
    onChange() {
      let that = this
      document.title = "123"
      let newUrl = `填入自己的m3u8地址`;
      let myPlayer = videojs('my-video', this.videoOptions)
      myPlayer.src(newUrl);
      myPlayer.load(newUrl);
      // 控制轮播图自动轮播
      myPlayer.on(`play`, function () {
        that.autoplaySwipe = 0
      });
      // 控制轮播图不自动轮播
      myPlayer.on("pause", function () {
        that.autoplaySwipe = 3000
      });
    },
  },

<style>
.vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  margin-top: -1em;
  margin-left: -0.5em;
}

.video-js .vjs-big-play-button {
  border: unset !important;
  background-color: unset !important;

}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  width: 100px;
  height: 100px;
  font-size: 100px;
  border-radius: 50%;
}
</style>