Web前端播放视频的三种方式

weixin_47932870

已于 2024-03-08 18:00:35 修改

阅读量2.2k

点赞数 3

文章标签：前端音视频

于 2024-03-08 16:45:08 首次发布

本文链接：https://blog.csdn.net/weixin_47932870/article/details/136566137

版权

第一种方式：使用hls插件进行播放

下载地址：https://cdn.jsdelivr.net/npm/hls.js@latest

<!DOCTYPE html>
<html>
  <head>
    <title>hls.js player example</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="video" controls></video>
    <script>
      var video = document.getElementById("video");
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource("http://...path/to/video.m3u8");
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          // video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = "http://...path/to/video.m3u8";
        video.addEventListener("loadedmetadata", function () {
          // video.play();
        });
      }

    	$("#start").click(function(){
       console.log("开始播放");
       player.play();
   		});
   		$("#pause").click(function(){
       console.log("暂停播放");
       player.pause();
   		});
   		$("#stop").click(function(){
       console.log("结束播放",player);
       player.stop();
   		});
      
    </script>
  </body>
</html>

// 引入文件
<script src="../../assets/js/hlsVideo.js"></script>

// 代码实现
function playVideo(videoUrl){
  videoUrl = "http://.../live.m3u8"
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = videoUrl;
    video.addEventListener("loadedmetadata", function () {
      video.play();
    });
  }
}

第二种：使用flv插件播放

下载地址：flv.js (v1.6.2) - flv.js 是一个使用纯JavaScript编写的FLV(HTML5 Flash Video)播放器。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

// 引入文件
<script src="../../assets/js/flv.min.js"></script>

// 代码实现
function playVideoApi(videoUrl) {
  if (flvjs.isSupported()) {
    var flvPlayer = flvjs.createPlayer({
      type: 'mp4',
      url: videoUrl
    });
    flvPlayer.attachMediaElement(video);
    flvPlayer.load();
    flvPlayer.play();
  }
}

// 参考案列：https://blog.csdn.net/lxw_hk2_zy/article/details/109898510

第三种：使用iframe直接播放已经处理好的视频

<div class="wrapper-jk">
  <iframe
    src="http://.../play.html"
    style="width: 100%; height: 100%"
    webkitallowfullscreen="true"
    mozallowfullscreen="true"
    allowfullscreen="true"
    allow="autoplay; fullscreen; microphone;"
    frameborder="0"
  ></iframe>
</div>