h5页面播放m3u8视频

已于 2023-11-27 17:27:03 修改
阅读量1k 收藏 1
点赞数
分类专栏： 记录 文章标签： 前端 html5 音视频
于 2022-06-24 17:31:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k0933/article/details/125447671
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></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: 50%;height:100%;'>
            <source id="source"
            	src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8"
            	type="application/x-mpegURL">
            </source>
        </video>
    </div>
</body>
 
<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
// 切换视频源时使用
    // var changeVideo = function (vdoSrc) {
    //     if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
    //         myVideo.src({
    //             src: vdoSrc,
    //             type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
    //         })
    //     } else {
    //         myVideo.src(vdoSrc)
    //     }
    //     myVideo.load();
    //     myVideo.play();
    // }
</script>

如果切换的时统一源，则应该先暂停播放，再销毁，之后再切换；

 myVideo.pause() //暂停
 myVideo.dispose() //销毁

参考
vue播放m3u8视频

k0933
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html使用video.js播放hls直播流
04-08
代码来源自网络，如有侵权请联系删除
m3u8在线播放器
什么风把您给吹来了
12-11 1万+
m3u8在线播放器。
Html5如何播放hls格式的视频
最新发布
weixin_51609337的博客
06-06 1175
HLS（HTTP Live Streaming）是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠。HLS通过将整个视频分成一系列小的分片，并通过HTTP协议进行传输，从而实现了视频的实时播放和边下边播的功能。由于视频被切分成多个小的分片，客户端可以实时地获取最新的视频分片。这样做的好处是，可以将视频分片缓存在客户端，从而降低了服务端的压力。当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这里要引用视频播放的js。
前端video标签播放m3u8格式视频
热门推荐
大湿胸的博客
08-10 6万+
直接使用video.js插件就行了 video插件用法：https://www.awaimai.com/2053.html 以下是全部代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视...
关于HLS直播流HTML页面播放解决
lengye7的博客
02-17 1万+
在最近的项目开发中，涉及了HLS直播音频流的播放，关于网上的资料较多，各种混杂，因此对此在问题解决尝试以及结果进行总结。 什么是HLS 首先，什么是HLS？ HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载...
HTML页面 加载播放RTMP协议流和HLS协议流直播视频
默默不代表沉默
11-08 6618
主要内容让rtmp或hls的协议流直播视频能在html页面正常显示（这里也是综合参考了网上其余的资料，最终放出下面这些实测可用的方案）。 首先是HLS协议流， 这种是播放m3u8格式的视频。 解决方案： 新建html页面, testHls.html (里面的视频地址我已经改了，请替换成自己的地址)： <!DOCTYPE html> <html la...
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
然而，不是所有浏览器都原生支持M3U8播放。例如，Chrome和Firefox需要借助第三方JavaScript库如HLS.js来实现对M3U8的支持。HLS.js是一个开源库，它可以跨浏览器地提供HLS流媒体播放功能。在你的项目中，可能需要引入...
uniapp npm引入Dplayer与hls解析播放m3u8格式视频
09-08
uniapp npm引入Dplayer与hls解析播放m3u8格式视频
海康视频在线播放m3u8及调试工具.zip
07-02
总的来说，这个压缩包为海康视频监控系统的开发者提供了一个基础的m3u8播放功能实例和调试手段，有助于他们快速理解和集成视频流服务。通过深入研究和实践，开发者可以创建出更稳定、低延迟、适应性强的视频播放应用...
m3u8视频文件在线播放器在线播放接口,附完整源码
03-23
在IT行业中，m3u8视频文件是一种广泛用于流媒体传输的格式，特别是在HTML5（H5）网页中实现在线播放。M3U8是一种基于UTF-8编码的文本文件，它包含了媒体文件的URL列表，这些文件通常是以TS（Transport Stream）分段...
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
video插件播放m3u8格式视频(存原生)
qq_44886882的博客
05-09 3595
这里使用原生的javascript实现m3u8格式视频播放。使用了包括video.min.js库和HLS插件。
h5播放m3u8格式视频流
weixin_43897062的博客
12-28 2164
h5播放m3u8格式视频流
web前端HTML播放HLS在线视频流（m3u8）
Evil_0_0_0的博客
04-26 2万+
最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：https://www.jianshu.com/p/8845b976fcaf 先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。 开始正题： 1、一个插件hls....
HTML5播放 M3U8的hls流地址
各类程序设计成品、文档、学习资料
10-13 1511
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
网页视频流m3u8/ts视频下载
m0_37471413的博客
03-31 2万+
原文链接 https://blog.csdn.net/weixin_33739627/article/details/88595353 亲测可用： 在视频播放页面按F12，打开开发者模式。 搜索 m3u8,搜索到 视频流文件的index信息。 使用 ffmpeg -i https://cdn.xxxx.xxxx.com/default/M00/0B/53/ChhDAV9HYq6AL-2SBTM3gqR-txM556_t/index.m3u8 -c copy OUTPUT.mp4 生..
html中播放m3u8文件
qq_41732963的博客
04-13 1万+
更换有效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://unp
html中 DPlayer 播放m3u8文件【方式二】
@必意玲
10-11 5566
通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入。如果你的vscode没有，需要vscode装一个插件。，或者你可以直接放在服务器里面在访问html。// 对地址进行解析。
HTML hls视频流播放
m0_62285976的博客
04-28 500
上方是多个监控，如果只有一个的话，直接把路径放到<source>标签里的src中即可。太多发不了，自己去搜吧。
vue2播放3mu8
08-31
为了在Vue2中播放m3u8视频，你可以按照以下步骤进行操作： 1. 在项目的`main.js`文件中全局引入`hls.js`库，这个库可以用来解析和播放m3u8视频。你可以通过如下代码进行引入： ``` window.Hls = require('hls.js') ``` 2. 安装并引入`vue-dplayer`插件，这个插件可以在Vue中实现视频播放功能。你可以通过如下代码进行安装和引入： ``` npm install vue-dplayer -S import VueDPlayer from 'vue-dplayer' import 'vue-dplayer/dist/vue-dplayer.css' Vue.use(VueDPlayer) ``` 3. 在你想要播放视频的页面中，使用`d-player`组件，并传入相应的配置参数。你可以在模板中添加如下代码： ``` <d-player ref="player" :options="videoPlay.dplayerOptions"></d-player> ``` 4. 在Vue组件的`data`选项中，定义一个名为`videoPlay`的属性，并在其中设置`dplayerOptions`属性来配置视频播放器。你可以在点击视频文件时进行配置，将具体的配置内容存放在`dplayerOptions`属性中，然后在`return`语句中将其返回。例如： ``` data() { return { videoPlay: { dplayerOptions: { // 这里放置你的视频播放器配置内容 } } } } ``` 通过以上步骤，你可以在Vue2中成功播放m3u8视频。请根据你的具体需求进行相应的配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue使用vue-dplayer播放m3u8视频](https://blog.csdn.net/qq_33881464/article/details/124861085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

k0933

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值