播放m3u8格式视频

weixin_40790248

已于 2024-06-27 10:32:14 修改

阅读量22

点赞数

文章标签：音视频

于 2023-07-13 11:49:25 首次发布

本文链接：https://blog.csdn.net/weixin_40790248/article/details/131699213

版权

hls.js ^1.2.0

html——demo如下

<!DOCTYPE html>



<html lang="en">

  <head>

    <meta charset="UTF-8" />



    <meta name="viewport" content="width=device-width, initial-scale=1.0" />



    <meta http-equiv="Access-Control-Allow-Origin" content="*" />



    <title>H5播放m3u8文件</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.4.0/hls.min.js"></script>

  </head>



  <body>

    <!-- <script src="./hlsMin.js"></script> -->



    <video

      id="video"

      muted="muted"

      controls="controls"

      style="width: 500px; height: 300px; border: 1px solid red"

    >

      测试

    </video>

    <input type="text" placeholder="请输入m3u8地址" />

    <button id="btn">输入完地址后点击这里播放</butt>



    <script>

      window.addEventListener("click", function () {

        play()

      });

      function play() {

        let url = document.querySelector("input").value;

        console.log('当前输入的地址：：：',url);

        if (Hls.isSupported()) {

          // 获取 video 标签



          var video = document.getElementById("video");



          var hls = new Hls();



          // 传入路径



          hls.loadSource(

            url

          );



          hls.attachMedia(video);



          hls.on(Hls.Events.MANIFEST_PARSED, function () {

            video.play(); // 调用播放 API

          });

        } else {

          alert("不支持HLS");

        }

      }

    </script>

  </body>

</html>