vue中使用使用videojs 播放m3u8格式的视频_vue m3u8视频 快进

  <div id="app">
    <div class="test-videojs">
 <video id="videoPlayer" class="video-js" muted></video>
 </div>
  </div>
</template>

<script>
import Videojs from "video.js"; 
export default {
 data() {
 return {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段视频，可将cctv1 （是live现场直播，不能快退）的替换为它，看到快进快退的效果
  nowPlayVideoUrl: "https://open.ys7.com/v3/openlive/J03798667_1_2.m3u8?expire=1683181484&id=443780366572589056&t=6a08b878d6f924ff9e2d944557604023840136e518c247358c549668d2f87731&ev=100"
 };
 },
 mounted() {
 this.initVideo(this.nowPlayVideoUrl);
 },
 methods: {
 initVideo(nowPlayVideoUrl) {
  // 这些options属性也可直接设置在video标签上，见 muted
  let options = {
  autoplay: true, // 设置自动播放
  controls: true, // 显示播放的控件
  sources: [
   // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
   {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
   }
  ]
  };
  // videojs的第一个参数表示的是，文档中video的id
  const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
  console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
  console.log(myPlyer === this); // 这里返回的是true
  });
 }
 }
};
</script>

<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51