【React】react实现前端播放m3u8格式视频

DPlayer文档：http://dplayer.js.org

导入依赖

yarn add dplayer hls.js

在头部引入依赖

import DPlayer from 'dplayer'
const Hls = require('hls.js')

新建一个div

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

初始化播放器

componentDidMount(){video = new DPlayer({container: document.getElementById('video'),  // 注意：这里一定要写div的domlang: 'zh-cn',video: {url: 'https://test.com/text.m3u8',  // 这里填写.m3u8视频连接type: 'customHls',customType: {customHls: function(video) {const hls = new Hls()hls.loadSource(video.src)hls.attachMedia(video)}}}
})
video.play() // 播放
video.on('ended', function() {// 监听函数
})
}

【React】react实现前端播放m3u8格式视频相关推荐

video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关官网下载页面:点击我到达在线演示播放页面:点击我到达 Git页面:点 ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...
Android播放M3U8格式视频失败
一.背景 Android使用Ijkplayer播放m3u8图片格式的视频失败IOS没问题,当我们使用自定义播放器播放后端给的一个视频地址时,正常直接把播放链接丢到播放器里即可,但是m3u8格式视频比较 ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...
GSYVideoPlayer 播放m3u8格式视频遇到的坑
1. 背景在开发小窗播放的时候遇到的问题,应用主页和详情页都有一个小窗播放,还有一个全屏的播放页,测试的时候发现两种小窗播放的场景不能播放,而全屏的页面却可以. 2. 报错 04-02 16:32: ...

【React】react实现前端播放m3u8格式视频

【React】react实现前端播放m3u8格式视频相关推荐

最新文章

热门文章