其他分享
首页 > 其他分享> > Video.js 播放m3u8直播流

Video.js 播放m3u8直播流

作者：互联网

谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流

粘贴到html打开即可

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>前端播放m3u8格式视频</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video-js-cdn.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/alt/video.core.min.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>
</head>

<body>
  <style>
    .video-js .vjs-tech {
      position: relative !important;
    }
  </style>
  <div>
    <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
      <!-- hls直播源地址：CCTV1高清 -->
      <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8">
    </video>
    <script>
      var player = videojs('myvideo', {}, function () { console.log('videojs播放器初始化成功') })
      player.play();
    </script>
  </div>
</body>

 

标签：m3u8,js,player,直播,Video,播放,videojs
来源： https://blog.csdn.net/qq_35493664/article/details/110391851