前端视频播放的几种方式 （主要实时播放）_前端播放视频

1. HTML5 的 video 标签：这是最直接的方式，可以直接在 HTML 中使用 video 标签来展示视频。

   <video width="320" height="240" controls>
     <source src="movie.mp4" type="video/mp4">
    
     <source src="movie.ogg" type="video/ogg">
    
     您的浏览器不支持 video 标签。
    
   </video>
   

   2.使用视频播放库：例如 Video.js、Plyr 等，这些库提供了丰富的 API 和自定义选项，可以满足更复杂的需求

   <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
    
   <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
     <source src="MY_VIDEO.mp4" type="video/mp4" />
   </video>
    
   <script>
     var player = videojs('my-video');
   </script>
   

3.实时播放

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

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

<script>

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

  if(Hls.isSupported()) {

    var hls = new Hls();

    hls.loadSource('http://example.com/path/to/stream.m3u8');

    hls.attachMedia(video);

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

      video.play();

    });

  }

  else if (video.canPlayType('application/vnd.apple.mpegurl')) {

//如果浏览器不支持 hls.js，但支持直接播放 HLS 流（例如 Safari），则直接将 video 元素的 src 属性设置为 HLS 流的 URL，并在元数据加载完成后开始播放视频。

    video.src = 'http://example.com/path/to/stream.m3u8';

    video.addEventListener('loadedmetadata',function() {

      video.play();

    });

  }

</script>

4.以下是一个使用 flv.js 播放 FLV 视频的例子：

FLV 格式支持流媒体，这意味着用户可以在下载完整个视频文件之前开始播放视频。这对于在线视频播放非常重要。FLV 格式支持多种编码       

FLV 格式也有一些缺点。例如，FLV 格式的视频文件通常比其他格式（如 MP4）大，这可能会导致更长的加载时间和更高的带宽消耗。此外，由于 Adobe 已经停止对 Flash Player 的支持，FLV 格式的视频在现代浏览器中的播放支持可能会逐渐减少。

<script src="https://cdn.jsdelivr.net/npm/flv.js@1/dist/flv.min.js"></script>

<video id="videoElement"></video>

<script>

  if (flvjs.isSupported()) {

    var videoElement = document.getElementById('videoElement');

    var flvPlayer = flvjs.createPlayer({

      type: 'flv',

      url: 'http://example.com/path/to/video.flv'

    });

    flvPlayer.attachMediaElement(videoElement);

    flvPlayer.load();

    flvPlayer.play();

  }

</script>