基于DPlayer的原生flv和hls播放

2024-01-29 16:59
文章标签 播放 flv 原生 hls dplayer

本文主要是介绍基于DPlayer的原生flv和hls播放,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Part1前言

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

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

4a5096b0f358583f09a815948141f3e7.png

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

026e9cec528125297a237ab5f7762617.png

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

Part2下载js文件

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

npm install dplayer --save

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

d9eaa8a77559314406acf1a2ab749a6f.png

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

819b29f7ea65ce87f5ccb84520511c28.png 0ec645bce69df4899a3b666aae1c2d6c.png

最后组装进同一个工程

8ef9e10df96aa1c7f388d21d9784a95d.png

Part3播放视频

播放视频的html示例如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="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()})},},

Part4总结

本文主要介绍了基于Dplayer的原生html播放hls和flv协议的方法。示例demo下载地址:https://download.csdn.net/download/g0415shenw/86847487

这篇关于基于DPlayer的原生flv和hls播放的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/657581

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python实现多路视频多窗口播放功能

《Python实现多路视频多窗口播放功能》这篇文章主要为大家详细介绍了Python实现多路视频多窗口播放功能的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下... 目录一、python实现多路视频播放功能二、代码实现三、打包代码实现总结一、python实现多路视频播放功能服务端开

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中,歌词的展示和滚动播放已经成为了一个非常常见的功能。今天,我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分,我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co