html 播放m3u8格式视频

1、先安装配置ffmpeg、参考：https://blog.csdn.net/weixin_58520733/article/details/120468420

2、将mp4视频切成m3u8

ffmpeg -i d:\video\3\1.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 d:\video\3\3.m3u8

3、写html代码播放:

<!DOCTYPE html>
<html>

<head>
  <title>dplayer播放m3u8</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
  <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
  <style>
    #dplayer {
      width: 800px
    }
  </style>
  <script>
    function init() {
      const dp = new DPlayer({
        element: document.getElementById('dplayer'),
        video: {
          //  pic: videoInfo.img, // 封面
          url: "/output/playlist.m3u8",  //此处可以是远程的url,也可以是本地的文件
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  </script>
</head>

<body onload="init()">
  <div>
    <div id="dplayer"></div>
  </div>
</body>
</html>

 

参考：https://blog.csdn.net/xiaoxiaodechongzi/article/details/126095795

posted @ 2024-12-13 14:46  ziff123  阅读(26)  评论(0)  编辑  收藏  举报