基于DPlayer的原生flv和hls播放

最新推荐文章于 2024-10-28 12:33:30 发布

xosg

最新推荐文章于 2024-10-28 12:33:30 发布

阅读量1.8k

点赞数

文章标签： vue javascript rtmp js ffmpeg

原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNTg5Njg3Ng==&mid=2247487049&idx=1&sn=1efa50e6294d4db77c26f8d626194c76&chksm=f9aeed0aced9641cd037d3eef94f09987182917eac090496ed0f422eff118000e304bd5d258c&scene=126&&sessionid=0

版权

本文聚焦在纯HTML环境下使用DPlayer库播放HLS和FLV协议视频。介绍了hls.js、flv.js和DPlayer库地址，说明了通过npm安装并拷贝js文件的方法，给出播放视频的HTML示例及设置要点，还提及针对HLS协议的自定义播放方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Part1前言

著名的hls.js和flv.js可以分别支持hls协议和flv协议的播放。两个库地址如下 https://github.com/bilibili/flv.js

https://github.com/video-dev/hls.js

但是我现在需要一个库同时支持hls和flv协议播放，这里推荐一个库DPlayer https://github.com/DIYgod/DPlayer

本文主要研究如何在纯html环境下，实现对其的使用。

Part2下载js文件

官网提供了npm的安装方法，没有提供js文件的下载。我们采用npm进行安装，之后拷贝出js文件。

npm install dplayer --save

然后再node_modules\dplayer\dist下拷贝出DPlayer.min.js。

由于其使用依赖于hls.js和flv.js。所以以同样的方法下载到其js文件。

最后组装进同一个工程

Part3播放视频

播放视频的html示例如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="dplayer" style="height: 400px; width: 800px"></div>
  </body>
</html>
<script src="flv.min.js"></script>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>
<script>
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: true,
    volume: 0,
    video: {
      url: 'http://192.168.1.52:9002/live/3508.live.flv',
      type: 'flv',
    },
    // video: {
    //   url: 'http://192.168.1.52:9002/live/3508/hls.m3u8',
    //   type: 'customHls',
    //   customType: {
    //     customHls: function (video, player) {
    //       const hls = new Hls()
    //       hls.loadSource(video.src)
    //       hls.attachMedia(video)
    //       hls.on(Hls.Events.MANIFEST_PARSED, function () {
    //         video.play()
    //       })
    //     },
    //   },
    // },
  })
</script>

几点说明：1、由于我们需要设置自动播放，所以需要将音量设置为0才可以以及自动播放设置为true

autoplay: true,
    volume: 0,

另外，这种方法对flv协议可以有用，但是对hls协议不行，我们针对hls协议采用自定义方法进行播放，示例如下

customType: {
    customHls: function (video, player) {
    const hls = new Hls()
    hls.loadSource(video.src)
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play()
    })
    },
    },