示例说明

• 演示预览缩略图 将鼠标放在进度条上可以出现预览图像，点击预览图像，可以定位到图像内容相近位置

• 演示双语字幕 字幕加载放在setTimeout时钟事件里，实际使用时可以放在ajax回调函数里异步加载

• 示自动小窗口 如果页面内容太多，导致页面出现滚动条，当滚动发生导致播放器被完全滚出屏幕时，将弹出视频小窗口

• 演示章节 可设定章节，点击章节可以跳转到指定播放位置

源代码

<template>
  <div class="vue-basic">
    <div class="main">
      <zwplayer v-if="playerOpen" ref="zwplayerRef" nodeid="main-playerxxx" :murl="movieUrl"
                :thumbnails="thumbnails" @onready="onPlayerReady" @onmediaevent="onPlayerMediaEvent"
                :snapshotButton="true" :optionButton="true" :sendDanmu="sendDanmu" :infoButton="false"
                :enableDanmu="true" :chapterButton="true" :autoSmallWindow="true" :fluid="true" :lostFocusPause="true"
                :logo="logo" danmuBar="danmu-controlbar"/>
    </div>
  </div>
</template>

<script>
import {
  zwplayer
} from 'zwplayer-vue2x'

export default {
  name: 'vue-basic',
  components: {
    zwplayer
  },
  data() {
    return {
      marker_list: [{
        "title": "浙江队晋级与争议",
        "desc": "讨论浙江队在CBA比赛中的惊险胜利和历史性晋级总决赛，以及深圳队的争议性失利和球迷的激烈反应。",
        "time": 0,
        "duration": 44,
        "thumb": null
      },
        {
          "title": "裁判问题与篮协应对",
          "desc": "分析比赛中裁判的吹罚尺度和争议，以及中国篮协和CBA公司对裁判问题的反应和处理措施。",
          "time": 44,
          "duration": 97,
          "style": {"background": "blue"},
          "image": null
        },
        {
          "title": "NBA赛场争议与湖人挑战",
          "desc": "探讨NBA赛场上的争议，特别是湖人队在季后赛中的表现和面临的挑战，以及篮球评论员对这些事件的看法和预测。",
          "time": 141,
          "duration": 76,
          "style": {"background": "green"},
          "image": null
        },


      ],
      logo: {
        icon: 'https://www.zwplayer.cn/uploadfile/test/zwplayer-960.png',
        dock: 'right',
        opacity: '70',
        //x: '10%',
        y: '2%',
        width: '15%'
      },
      movieUrl: 'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4',
      thumbnails: {
        "url": "https://www.zwplayer.cn/uploadfile/test/b44c43c90be3521bc352aad1e80f9cd0_thumb.jpg",
        "width": 160,
        "height": 90,
        "row": 9,
        "col": 9,
        "total": 74
      },
      playerOpen: true,
      CurrentTime: 0
    };
  },
  props: {
    msg: String
  },
  methods: {
    onPlayerReady() {
      console.log('player ready event.');

      let player = this.$refs.zwplayerRef;
      var that = this
      setTimeout(function () {
        if (player) {

          let subtitleURL_korean =
              'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_kore.srt';
          let subtitleURL_japan =
              'https://www.zwplayer.cn/uploadfile/test/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggtFawR3lNR7hQ2_jpan.srt';

          player.addSubtitle(subtitleURL_korean, '1');

          player.addSubtitle(subtitleURL_japan, '2');

          console.log(that.marker_list)
          player.setChapters(that.marker_list);
        }
      }, 1000)
    },
    onPlayerMediaEvent(event) {
      console.log('media event:', event.type);
    },
    sendDanmu: function (danmu) {
      console.log('sendDanmu:', danmu);
      // 调用websocket等方法将弹幕实际发送出去
    },
    currentTime: function () {
      let player = this.$refs.zwplayerRef;
      // 用于界面显示
      this.CurrentTime = player.getCurrentTime(); //CurrentTime;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  /* width: 1280px; */
  min-height: 220px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #222;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>