Html5 播放Hls格式视频

最新推荐文章于 2024-06-06 10:37:10 发布
最新推荐文章于 2024-06-06 10:37:10 发布
阅读量631 收藏
点赞数
文章标签： ffmpeg
原文链接：http://www.cnblogs.com/wanggang123/p/8428863.html
版权

二群号为766718184 ，博主提供Ffmpeg、GB28181视频教程 播放地址： http://www.iqiyi.com/u/1426749687  移动端Html5支持Hls格式视频播放，创建一个新的文件命名为VideoPlayerDemo-Html5.html打开

该文件写入如下内容，保存文件将该文件放到移动端（例如Android手机）直接打开可观看视频，

如图1所示。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML5播放视频</title> 
</head>
<body>
 
<video width="352" height="288" controls>
  <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/vnd.apple.mpegurl">
  浏览器不支持 video 标签。
</video>
</body>
</html

 

                                               图1Html5 播放Hls效果图

交流群号为766718184 ，博主提供Ffmpeg、GB28181视频教程 播放地址： http://www.iqiyi.com/u/1426749687

转载于:https://www.cnblogs.com/wanggang123/p/8428863.html

weixin_30477797
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码，Chrome + Firefox 
HTML5播放HLS码流视频
skyxc233的博客
03-15 918
本文同步于个人博客 ： 蝴蝶飞不过沧海 | Blog 本文链接 <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> <video id="video"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var
Html5如何播放hls格式的视频
最新发布
weixin_51609337的博客
06-06 1470
HLS（HTTP Live Streaming）是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠。HLS通过将整个视频分成一系列小的分片，并通过HTTP协议进行传输，从而实现了视频的实时播放和边下边播的功能。由于视频被切分成多个小的分片，客户端可以实时地获取最新的视频分片。这样做的好处是，可以将视频分片缓存在客户端，从而降低了服务端的压力。当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这里要引用视频播放的js。
开发类 - HTML5 播放 hls 流媒体视频
milkbrother的博客
01-09 1271
1.资源下载：https://pan.baidu.com/s/1IZ4HKhNg08cbmDBl4FGYJg 2.本机地址：http://127.0.0.1:8888/hls/home.m3u8 3.说明： 经测试，在最新版的 Android webview 中不用任何插件，可以直接播放 经测试，在windows10自带的Edge浏览器 可直接播放，PC端 safari浏览...
在html5中注册hls,hls在HTML5页面中进行播放
weixin_32596893的博客
06-17 331
最近，m3u8视频如何在HTML页面上进行播放。找了半天都没找到，花了一天时间将问题解决，为了方便别人，编写了这篇日志。实现html页面下m3u8格式视频的播放。网上也有人说了，需要用到jwplayer。网页代码如下。/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">校园观光车实景查看通过这个网页您就可以看到校园观...
H5视频播放工具hls.js
12-29
H5视频播放工具hls.js是一款专为HTML5设计的开源JavaScript库，它使得在现代浏览器上播放m3u8视频流变得简单易行，无需依赖任何外部插件。m3u8是一种基于HTTP的流媒体协议，常用于传输分段的TS（Transport Stream）...
视频流播放hls格式demo.zip
08-09
本示例"视频流播放hls格式demo.zip"着重于前端如何处理RTSP（Real-Time Streaming Protocol）格式的视频流并将其转化为适应性更强的HLS格式进行播放。 首先，我们需要了解RTSP和HLS的基本概念。RTSP是一种应用层...
海康摄像头HLS视频播放示例
01-31
总之，海康摄像头HLS视频播放示例为我们展示了如何配置摄像头以提供HLS流，并在浏览器中利用HTML和JavaScript技术实现流畅的视频播放。这在远程监控、视频直播等领域具有广泛应用价值。了解并掌握这些知识，对于开发...
html5 video视频播放插件
12-29
7. **适应性流媒体**: HTML5 Video还支持 Adaptive Streaming，例如HTTP Live Streaming (HLS)或MPEG-DASH，可以根据网络状况动态调整视频质量。 8. **字幕与轨道**: `track`元素可以用来添加字幕、隐藏式字幕或者...
web前端HTML播放HLS在线视频流（m3u8）
热门推荐
Evil_0_0_0的博客
04-26 2万+
最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：https://www.jianshu.com/p/8845b976fcaf 先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。 开始正题： 1、一个插件hls....
前端播放视频流（rtsp，rtmp,hls）.html
07-30
我這個内容就是博客上门的内容
支持m3u8格式播放的video.js
07-23
为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
Video.js 播放m3u8视频
01-22
Video.js 播放m3u8视频 videojs5.hlsjs.js组件 播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频
m3u8文件视频播放（ckplayer）完整代码
09-05
ckplayer支持m3u8文件播放，但是官方并没有具体说明怎样配置，其实只要下载对应的m3u8.swf就可以播放m3u8文件了，此包中已经配置好了，只要将视频链接换成正确就可以播放m3u8视频了
html5 video js 播放,H5播放HLS之videojs播放视频
weixin_42119866的博客
07-01 2740
一、简介如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。videojs播放库是比较有名的一个播放库，它不仅支持hls也支持rtmp，不过如果是播放rtmp它最终也是通过flash插件完成的，我们暂时只看hls。二、实现如果使用videojs播放hls前端代码实现如下：Titleid="...
html播放hls实时流直播,HTML5播放HLS流(.m3u8文件) Apache 跨域设置
weixin_30094815的博客
05-31 1686
HLTML5播放HLS流(.m3u8文件) Apache 跨域设置1，使用 mod_headers 添加请求头信息Apache 配置文件中确保加载了以下模块：LoadModule headers_module modules/mod_headers.so虚拟主机配置文件中，添加Header add Access-Control-Allow-Origin: *这样做以后，提示 m3u8 没有提示禁止...
H5页面直播hls视频
ASP.NET
02-03 1101
#PC、手机web页面直播hls视频 概述 一转眼就到了11月，很多工作中遇到的坑都在一一解决，仔细想了想值得分享的应该是web页面直播hls格式的视频了，当时我们的项目是需要在手机嵌入的页面来播放摄像头的视频，视频格式是hls直播流，HTML5的video标签并不能直接播放hls直播流，需要借助插件来实现。 关于插件的话网上也搜了一大堆用来测试，发现免费还好用的应该算是video.js了，vi...
HTML5点播m3u8(hls)格式视频
良_123的专栏
05-23 1万+
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
hls 格式播放 js 实例
07-19
### 回答1： HLS（HTTP Live Streaming）是一种用于在不同设备和网络条件下进行流式传输的协议。它将视频文件分成一系列小的可下载和播放的块，使得视频可以根据设备和网络条件进行自适应调整。而在播放HLS格式的视频时，可以使用JavaScript来控制和处理播放操作。 在实现HLS格式播放的JavaScript示例中，首先需要引入相关的库或者框架，如video.js、hls.js等，这些库可以帮助我们处理HLS格式的视频。 接着，在HTML文件中，我们可以创建一个`<video>`标签来展示视频内容，并给它一个唯一的`id`用于JavaScript获取和控制。 在JavaScript代码中，可以使用`document.getElementById()`方法通过`id`获取到`<video>`标签元素，并创建一个`Hls`对象来处理HLS视频格式。然后，设置一些视频相关的属性，比如自动播放、控制条等。 接下来，使用`Hls.loadSource()`方法加载HLS视频的URL，并通过`Hls.attachMedia()`方法将其和`<video>`标签进行关联。 最后，使用一些事件监听的方式来监控视频的播放状态，如`on('play')`、`on('pause')`等，以及一些控制方法，如`play()`、`pause()`、`seek()`等，来控制视频的播放和操作。 示例代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HLS格式播放示例</title> <script src="video.js"></script> <script src="hls.js"></script> </head> <body> <video id="my-video" controls autoplay></video> <script> var video = document.getElementById('my-video'); var hls = new Hls(); if(Hls.isSupported()) { hls.loadSource('video-url.m3u8'); hls.attachMedia(video); video.addEventListener('play', function() { console.log('视频开始播放'); }); video.addEventListener('pause', function() { console.log('视频暂停'); }); video.addEventListener('seeked', function() { console.log('视频跳转播放'); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'video-url.m3u8'; } </script> </body> </html> ``` 以上是HLS格式播放的一个简单示例，通过以上代码，我们就可以在网页中使用JavaScript来播放HLS格式的视频了。当然，根据具体的需求和业务场景，还可以进行更多的定制和功能扩展。 ### 回答2： 要播放 HLS 格式的视频，我们可以使用 JavaScript 来实现。以下是一个使用 JavaScript 播放 HLS 格式的示例： 首先，我们需要引入播放器库，常用的有 video.js 和 hls.js。我们可以使用 `<script>` 标签将这些库引入到 HTML 页面中。例如： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> ``` 接下来，在 HTML 页面中创建一个 `<video>` 标签，并给予它一个唯一的 ID，用于在 JavaScript 中进行操作。例如： ```html <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="/path/to/hls/video.m3u8" type="application/x-mpegURL"> </video> ``` 然后，在 JavaScript 中，我们使用`videojs`函数初始化播放器，并为其设置一些配置，例如： ```html <script> var player = videojs('my-video', { html5: { hls: { overrideNative: true // 使用 JS 实现播放 HLS } } }); </script> ``` 最后，我们需要使用 hls.js 加载并播放 HLS 视频流。我们在播放器初始化之后，监听播放器的 ready 事件，然后通过 hls.js 加载视频流。例如： ```html <script> player.ready(function() { var videoSrc = player.src(); if (videoSrc.includes('.m3u8')) { var hls = player.tech().hls; hls.loadSource(videoSrc); hls.on(Hls.Events.MANIFEST_PARSED, function() { player.play(); }); } }); </script> ``` 通过以上步骤，我们就可以使用 JavaScript 来播放 HLS 格式的视频了。这个示例使用了 video.js 和 hls.js，你可以根据需要调整相关库和配置。 ### 回答3： HLS（HTTP Live Streaming）是一种流媒体传输协议，可用于在网络上实时传输音视频内容，适用于各种平台和设备。在使用HLS格式播放时，我们可以使用JavaScript编写一个播放器的实例。 首先，我们需要一个HTML页面作为播放器的容器。在HTML文件中，我们可以使用video元素来嵌入HLS视频流。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HLS 播放器</title> </head> <body> <video id="hlsPlayer" autoplay controls></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script> var video = document.getElementById('hlsPlayer'); if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource('path/to/hls/stream.m3u8'); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'path/to/hls/stream.m3u8'; } </script> </body> </html> ``` 在上面的示例中，我们首先在`<head>`标签中包含了HLS.js库的链接，用于支持HLS播放。在`<video>`标签中，我们设置了id属性为"hlsPlayer"，并指定了`autoplay`和`controls`属性，使视频自动播放和显示控制面板。 在JavaScript部分，我们使用`document.getElementById`方法获取到video元素，并创建一个Hls实例。如果浏览器支持HLS，我们加载HLS流源并将其附加到video元素上。如果浏览器支持苹果的HTTP Live Streaming格式，则直接将HLS流源赋值给video的src属性。 通过以上的方式，我们可以在网页中使用HLS格式进行视频播放，提供更好的用户体验，并且兼容多种平台设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值