videojs在html和vue中播放m3u8

87 阅读 0 评论 58 点赞

我是靠谱客的博主真实微笑，这篇文章主要介绍videojs在html和vue中播放m3u8，现在分享给大家，希望可以做个参考。

在html中使用

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>videoJs</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
    type="text/javascript"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

.video-js[tabindex="-1"] {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>

var myVideo = videojs('myVideo1', {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
    })
    myVideo.play()
  </script>
</body>

</html>

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>videoJs</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
    type="text/javascript"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .video-js[tabindex="-1"] {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>

  <video id="myVideo1" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay preload="auto"
    width="100%" height="100vh" data-setup='{}'>
    <source id="source" src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
      type="application/x-mpegURL">
  </video>
  <script type="text/javascript">

    var myVideo = videojs('myVideo1', {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
    })
    myVideo.play()
  </script>
</body>

</html>

然后就正常加载可以播放了，pc端可以播放。前提是直播地址要对啊，集美！
在这里插入图片描述

在vue中使用，一般播放地址都是动态赋值的，

需求是播放结束后video不显示，用videojs自带的videojs(this.$refs.videoRef).hide(); 相对应得就有videojs(this.$refs.videoRef).show(); 这个方法会给videojs加display:none ，我试的手动加加不上
在这里插入图片描述
在vue中我是在获取到播放地址后再进行初始化，因为最开始直播地址为空，在mounted初始化会报错"No compatible source was found for this media."