html中 DPlayer 播放m3u8文件【方式二】

1. 播放效果

2. init页面播放文件代码

通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="referrer" content="never"><title>m3u8</title></head><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}</style><body><iframesrc="./video.html?hlsUrl=http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32ce48a8e5b0a791ce24.m3u8"width="500px" height="50%"></iframe></body>
</html>

3. video页面 m3u8播放文件

需要引入第三方文件 DPlayer.min.js，hls.js，flv.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="referrer" content="never"><title>m3u8</title>
</head>
<style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}#dplayer {width: 100%;height: 100%;}.dplayer-controller-mask,.dplayer-controller,.dplayer-mobile-play,.dplayer-notice-list {display: none !important;}</style><body><div id="dplayer"></div>
</body>
<script src="./DPlayer.min.js"></script>
<script src="./hls.js"></script>
<script src="./flv.js"></script>
<script>// 对地址进行解析let url = location.href.split('?hlsUrl=')[1].replace('http:', '').replace('https:', '')let dp = new DPlayer({container: document.getElementById("dplayer"),live: true,autoplay: true,preload: 'auto',volume: 0,hotkey: false,lang: 'en',video: {url: url,type: 'customHls',customType: {customHls: function (video, player) {const hls = new Hls();hls.loadSource(url);hls.attachMedia(video);},customFlv: function (video, player) {const flvPlayer = flvjs.createPlayer({type: 'flv',url,});flvPlayer.attachMediaElement(video);flvPlayer.load();},},},});dp.on('playing', () => {dp.volume(1)window.top.postMessage('playing');document.getElementById('dplayer').setAttribute('style', 'pointer-events:none')})dp.on('canplay', () => {dp && dp.paused && dp.play()})window.addEventListener("message", function (event) {dp && dp.paused && dp.play()})</script>
</html>

4. 打开方式

请使用服务的方式打开，可以使用vscode的Open with Five Server打开，他会给你开一个本地的服务，然后进行访问。直接打开会报下面的错误

如果你的vscode没有，需要vscode装一个插件Live Server (Five Server) ，或者你可以直接放在服务器里面在访问html

html中 DPlayer 播放m3u8文件【方式二】相关推荐

html中 videojs 播放m3u8文件【方式一】
1. 播放效果 2. 实现代码如果你直接打开html播放不了,请更换src,因为http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32 ...
DPlayer播放m3u8
使用DPlayer播放m3u8文件:参考官网https://dplayer.diygod.dev/zh/guide.html#hls
WPF 播放m3u8文件(使用Vlc库，支持在线和离线播放)
简介: 目前主流的播放器都是调用VLC库(支持视频类型比较多且功能强大),主流视频网站采用的是流媒体传输协议(就是将一段视频切成无数个小段,这几个小段就是ts格式的视频文件,一段一段的 ...
基于ffmpeg的播放器，播放m3u8文件时，seek问题
文章目录 1,准备知识, seek代码流程: 策略: 2,问题描述, 3,原因分析及其修改, 拿到这个问题,在不debug代码或查看日志的情况下,根据上面1的准备知识,可以大概判断出原因. 针对问题视 ...
解决Ubuntu 18.04中无法播放MP4文件的问题
遇到的问题在Ubuntu 18.04中无法播放MP4文件,提示播放该文件需要H.264(主配置文件)解码器. 测试机型:联想邵阳E42 测试时间:2020年9月5日测试系统:18.04 解决方法 ...
WordPress主题集成DPlayer播放M3U8流媒体
M3U8 流媒体目前很流行,可将视频分割成多个部分,减轻服务器负担,加快播放速度,但很少看到有完整的 WordPress 主题集成播放 M3U8 流媒体的教程,这里写个简单的教程供参考.利用 DPla ...
CKPlayer播放M3U8文件 (加载失败)问题
官网下载: ckplayer csdn下载: csdn 下载本地以后, 解压ckplayer.zip, 里面有示例文件, index.html, flashplayer.html等, index.ht ...
PHP中两种包含文件方式、三种注释风格、四种标记风格
2019独角兽企业重金招聘Python工程师标准>>> 一.两种包含文件的方式 ①require语法格式:require("文件名"):这个函数通常放在PHP程序 ...
共享主机与虚拟机文件方式二
从主机向虚拟机传输文件,除了使用Linux内自带的Vmware Tools for Linux,还可以使用FileZilla.Xshell等工具. 这些工具需要使用者输入需传输文件的虚拟机的IP地址. ...
Vue中video播放m3u8视频
1,安装依赖包 npm install --save xgplayer npm install --save xgplayer-hls 2,贴代码吧 <template><div&g ...

html中 DPlayer 播放m3u8文件【方式二】

1. 播放效果

2. init页面播放文件代码

3. video页面 m3u8播放文件

4. 打开方式

html中 DPlayer 播放m3u8文件【方式二】相关推荐

最新文章

热门文章

html中 DPlayer 播放m3u8文件【方式二】

1. 播放效果

2. init页面 播放文件代码

3. video页面 m3u8播放文件

4. 打开方式

html中 DPlayer 播放m3u8文件【方式二】相关推荐

最新文章

热门文章

2. init页面播放文件代码