html中播放m3u8文件

最新推荐文章于 2024-04-25 18:40:14 发布
最新推荐文章于 2024-04-25 18:40:14 发布
阅读量1.1w 收藏 9
点赞数 11
分类专栏： javaScript 文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41732963/article/details/115668286
版权

更换有效src打开就行

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>播放m3u8格式</title>
		<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
		<script src="https://unpkg.com/video.js/dist/video.js"></script>
		<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
		<!-- videojs-contrib-hls 用于在电脑端播放 如果只需移动端播放可以不引入 -->
	</head>
	<body>
		<style>
			.video-js .vjs-tech {position: relative !important;}
    	</style>
		<div>
			<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'
			 style='width: 100%;height: auto'>
				<source id="source" src="http://xxxxxx/openUrl/GDj5iLK/live.m3u8" type="application/x-mpegURL">
				</source>
			</video>
		</div>
	</body>

	<script>
		var myVideo = videojs('myVideo', {
			bigPlayButton: true,
			textTrackDisplay: false,
			posterImage: false,
			errorDisplay: false,
		})
		myVideo.play()
		var changeVideo = function(vdoSrc) {
			if (/\.m3u8$/.test(vdoSrc)) {
				myVideo.src({
					src: vdoSrc,
					type: 'application/x-mpegURL'
				})
			} else {
				myVideo.src(vdoSrc)
			}
			myVideo.load();
			myVideo.play();
		}
	</script>
雷haoming
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html播放m3u8格式视频
moqiluoji的博客
11-15 1972
m3u8格式文件用jquery播放
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码，Chrome + Firefox 
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）
11-30
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效） 。
m3u8视频播放HTML
yushun的博客
09-19 2713
/ 告诉videojs,这是一个hls流。// videojs 简单使用。
微信小程序有的机型无法播放m3u8格式的直播流，使用H5在微信环境里播放
最新发布
lixu102593的博客
04-25 557
这个还是有问题，有的直播地址在鸿蒙和苹果上都有声音，有的是鸿蒙上有声音，但是苹果上没有，也没找几个手机，测试的不准，不知道问题出在哪里，有可能是直播流的格式问题；我这测试鸿蒙的还有苹果X及部分机型在微信小程序里无法播放，不知道什么原因；直播流地址有的是hevc有的是h.264，音频都是aac；
html中 DPlayer 播放m3u8文件【方式二】
@必意玲
10-11 5176
通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入。如果你的vscode没有，需要vscode装一个插件。，或者你可以直接放在服务器里面在访问html。// 对地址进行解析。
阿里云实践 - HTML5断点播放m3u8视频(videojs)
WJL_MGQS的专栏
05-12 4085
场景：HTML5页面需要通过<video>标签播放一段200M的服务器视频，默认会需要先下载完视频后才播放，有较长的等待时间; 解决方案：前端通过videojs-contrib-hlsjs.min.js来控制<video>标签进行播放m3u8视频流播放。 步骤： 1：服务端视频video.mp4生成video.ts视频数据包，执行如下命令： ffmpeg -y -i /deploys/html/statics/video/video.mp4 -vcodec ...
m3u8 videojs 倍速播放属性
t0m的专栏
02-10 7000
var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, playbackRates: [0.5,1,1.5,2,3], #...
HTML5播放 M3U8的hls流地址
各类程序设计成品、文档、学习资料
10-13 1488
HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M3U8的hls流地址HTML5播放 M
HTML5点播m3u8(hls)格式视频
良_123的专栏
05-23 9937
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
m3u8视频本地单网页播放
06-21
适用于m3u8视频格式解析，本地单文件HTML，用文本工具修改Index.html 内的rul地址即可播放m3u8视频格式。
m3u8 html本地播放器
02-10
videojs m3u8 html // videojs 简单使用 var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, playbackRates: [0.5,1,1.5,2,3], })
手机端videojs播放m3u8的文件.zip
08-06
手机端 安卓和ios 均可播放。 使用前请仔细看说明哦 在VUE 环境下使用 videojs播放m3u8的文件
Video.js 播放m3u8视频
01-22
Video.js 播放m3u8视频 videojs5.hlsjs.js组件 播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频
m3u8 视频在线提取下载工具 支持转MP4格式 HTML源码
10-05
该源码支持将m3u8视频源转换为MP4格式进行下载或者原m3u8格式下载！！待下载碎片总量以及进度为100%全部完成后将自动合并弹出下载。无需安装，打开网页即可用，强制下载现有片段，无需等待完整视频下载完成。 1....
html页面播放视频编码是265的m3u8的流媒体地址
各类程序设计成品、文档、学习资料
10-27 1065
html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是265的m3u8的流媒体地址html页面播放视频编码是
m3u8流文件在html视频播放器中播放有声音无画面问题
m350058411的博客
10-21 7120
m3u8流文件在html视频播放器中播放有声音无画面问题 前言 最近在做一个海康视频设备直接在网页上播放的功能，由于现在浏览器不支持flash等插件，所以想着将海康的rtsp流先转化为hls流再使用html5来播放直播画面，但是在后台把流转化成hls流的m3u8文件后再到html中播放就出现了有声音没画面的问题，先后试了videojs，hls.js，dplayer等播放器插件，均无法播放画面只有声音。 解决方案 实际上，这个问题是播放器插件和流媒体格式和海康的流媒体格式不一致导致的，市面上大部分的海康流媒体
【音视频】m3u8的生成以及播放
疯癫的老码农的博客
01-12 1091
一些网站或者系统，也会直接在html中设置一个mp4的文件，使用video进行直接播放，相比m3u8的方式更为直接，至于说使用mp4播放是否性能比m3u8要好，我没有做过详细的研究，但是从对m3u8的理解的角度，m3u8其实就是对视频做了切割，播放的时候一个个ts进行下载。
html播放hls
枯树无花
12-29 1230
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo</title> <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> </head> <body> &l..
在html5中播放m3u8的插件
09-24
### 回答1： 在 HTML5 中，你可以使用 `<video>` 标签来播放 m3u8 视频。你可以将 m3u8 视频的 URL 指定为 `video` 标签的 `src` 属性。例如： ```html <video src="http://example.com/video.m3u8" controls></video> ``` 你也可以使用第三方的播放器库来播放 m3u8 视频，比如 Hls.js。你可以在你的 HTML 页面中通过引入 Hls.js 的脚本来使用它： ```html <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> ``` 然后你就可以使用 Hls.js 提供的 API 来播放 m3u8 视频了。这里是一个简单的例子： ```html <video id="video" controls></video> <script> if (Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); hls.loadSource('http://example.com/video.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); }); } </script> ``` 请注意，Hls.js 只支持在现代浏览器中使用。如果你希望在旧版浏览器中也能播放 m3u8 视频，你可以使用第三方的兼容库，比如 video.js。 ### 回答2： 在HTML5中播放M3U8的插件可以通过使用视频播放器库或者特定的插件来实现。M3U8是一种基于HTTP Live Streaming（HLS）协议的视频流媒体文件格式，常用于手机、平板电脑以及在Web上播放视频。 一种常用的方法是使用video.js，这是一个流行的开源HTML5视频播放器库。video.js提供了全面的功能和可自定义的界面，同时也支持M3U8格式的视频流。你可以通过在HTML文档中引入video.js的库文件，然后使用视频标签加上相关的属性来播放M3U8视频。此外，你还可以自定义video.js的皮肤和控制栏样式来满足个性化需求。 另外一个流行的HTML5视频播放器插件是DPlayer，这也是一个开源的视频播放器库。DPlayer支持多种视频格式，包括M3U8，并提供了简单易用的API来控制视频的播放和暂停等功能。你可以在HTML文档中引入DPlayer的库文件，并使用相关的代码片段来创建播放器实例并加载M3U8视频。 总的来说，在HTML5中播放M3U8的插件有很多选择，video.js和DPlayer是其中两个常用的插件。你可以根据自己的需求和喜好选择一个合适的插件，然后根据插件的文档和示例来进行配置和使用。 ### 回答3： 在HTML5中播放M3U8格式的视频，可以使用一些插件或者API来实现。以下是一种常用的解决方案： 一种常见的方法是使用video.js插件结合hls.js库来实现播放M3U8格式的视频。Video.js是一个开源的HTML5视频播放器，而hls.js是一个JavaScript库，可以将M3U8格式的视频转换为HTML5视频。 首先，将video.js和hls.js的CDN链接添加到HTML页面的头部，以便引入这两个库的功能。 在HTML中，使用<video>标签来创建一个视频播放器的容器，可以指定宽度、高度和其他属性。 然后，在JavaScript中，使用video.js实例化一个播放器对象，并且将hls.js作为video.js的技术选项来指定使用M3U8格式的视频。 接下来，使用播放器对象的src方法，将M3U8视频的URL传递给播放器。 最后，调用play方法开始播放视频。 这样，就可以在HTML5中播放M3U8格式的视频了。 需要注意的是，由于浏览器兼容性的问题，有些浏览器可能无法直接播放M3U8视频。在这种情况下，推荐使用hls.js库来将M3U8格式转换为HTML5视频，以便在多个浏览器中实现兼容性。 总结起来，通过结合video.js和hls.js插件，我们可以在HTML5中实现播放M3U8格式的视频。这种方法简单易用，并且具有较好的兼容性，适用于大多数现代浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值