!DOCTYPE html html head meta charset=UTF-8 titletitle script src=httpscdnjsdelivrnetnpmhlsjslatestscript!-- hlsjs必须引入可下载至本地 -- style type=textcss s

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title> 
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><!-- hls.js必须引入，可下载至本地 -->
        <style type="text/css">  
<pre><code>    &lt;/style&gt;  
&lt;/head&gt;  
&lt;body&gt;  
    &lt;div&gt;  
        &lt;input type=&quot;text&quot; id=&quot;urlInput&quot; placeholder=&quot;Enter HLS URL&quot;&gt;
		&lt;button onclick=&quot;loadVideo()&quot;&gt;Play&lt;/button&gt;
		&lt;video id=&quot;video&quot; width='auto' height=&quot;400&quot; src=&quot;&quot; controls autoplay muted&gt;&lt;/video&gt;
    &lt;/div&gt;  
&lt;/body&gt;  
</code></pre>
  <script type="text/javascript">
	//播放视频流 
    function loadVideo(){
		var video = document.getElementById('video');//获取 video 标签
		var hlsUrl = document.getElementById('urlInput').value;//获取输入的视频流地址

		if(Hls.isSupported()) {
			var hls = new Hls();//实例化 Hls 对象
			hls.loadSource(hlsUrl);//传入路径
			hls.attachMedia(video);
			hls.on(Hls.Events.MANIFEST_PARSED,function() {
				video.play();//调用播放 API
			});
		} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
			video.src = hlsUrl;
			video.addEventListener('loadedmetadata',function() {
				video.play();
			});
		}
    }
  </script>
</html