网页播放hls直播流

使用HLS库

要在网页中嵌入HLS（HTTP Live Streaming）直播流，你可以使用HTML5的标签结合JavaScript库，如Hls.js。Hls.js是一个流行的开源库，它可以让你在不支持HLS的浏览器中播放HLS流，比如在不支持HLS的桌面浏览器中。

以下是一个简单的例子，展示了如何使用Hls.js在网页中嵌入HLS直播流：

首先，确保你的网页中包含了Hls.js库。你可以从Hls.js的GitHub页面下载库文件，或者直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

在HTML中添加一个标签，用于显示视频流：

<video id="video" controls></video>

使用JavaScript和Hls.js来加载和播放HLS流：

<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    // HLS流的URL
    var streamUrl = '你的HLS流地址.m3u8';

    hls.loadSource(streamUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
  // Hls.js不支持时使用原生HTML5播放
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = streamUrl;
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }
</script>

请确保将你的HLS流地址.m3u8替换为你的实际HLS流地址。

这段代码首先检查浏览器是否支持Hls.js。如果支持，它将创建一个Hls实例，加载HLS流，并在标签中播放。如果浏览器不支持Hls.js但原生支持HLS（如Safari），则直接设置标签的src属性为HLS流地址。

请注意，由于浏览器安全策略，HLS流需要支持CORS（跨源资源共享），否则视频可能无法在某些浏览器中播放。确保你的流服务器正确设置了CORS头部。

如何去掉多余的按钮

可以通过CSS

      /*所有控件*/
          video::-webkit-media-controls-enclosure{
              display: none;
          }
/*全屏按钮*/
          video::-webkit-media-controls-fullscreen-button {
              display: none;
          }
          
        /*播放按钮*/
          video::-webkit-media-controls-play-button {
              display: none;
          }
        /*进度条*/
          video::-webkit-media-controls-timeline {
              display: none;
          }
        /*观看的当前时间*/
          video::-webkit-media-controls-current-time-display{
              display: none;
          }
        /*剩余时间*/
          video::-webkit-media-controls-time-remaining-display {
              display: none;
          }
        /*音量按钮*/
          video::-webkit-media-controls-mute-button {
              display: none;
          }
        video::-webkit-media-controls-toggle-closed-captions-button {
            display: none;
        }
        /*音量的控制条*/
          video::-webkit-media-controls-volume-slider {
              display: none;
          }
 

但是还有三个点无法去掉

如何把上面的三个点隐藏，不要播放速度以及画中画
可以使用下面方法

<video   controlslist="nodownload noremoteplayback noplaybackrate"
                            disablePictureInPicture="true"
                            disableRemotePlayback="true"
                            controls id="video" width="100%"></video>