在edge上有效

<video width="600" controls>
<source src="https://www.gentaji.com/20200205/2J8Ij9tS/index.m3u8" type="application/x-mpegURL" />
</video>

使用video.js

λ npm install --save @videojs/http-streaming
<link rel="stylesheet" href="./node_modules/video.js/dist/video-js.min.css" />

<video-js id="vid1" class="vjs-default-skin" controls>
<source
src="https://www.gentaji.com/20200205/2J8Ij9tS/index.m3u8"
type="application/x-mpegURL"
/>
</video-js> <script src="./node_modules/video.js/dist/video.min.js"></script> <script>
var player = videojs("vid1");
player.play();
</script>

在浏览器上播放m3u8视频的更多相关文章

  1. 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  2. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  3. [转载]为什么有些MP4文件在Chrome浏览器上播放不了?

    http://blog.sina.com.cn/s/blog_6bb7ebcc0101c2ja.html Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件). ...

  4. html5播放m3u8视频,web端看直播

    https://github.com/jiqing9006/hLive <!DOCTYPE html> <html> <head> <meta charset ...

  5. html5结合flash实现视频文件在所有主流浏览器兼容播放

    来源:http://blog.csdn.net/freshlover/article/details/7535785/ 由于html5的出现,让网页中的视频.音频有了更加便捷的实现方式.但是video ...

  6. php使用播放插件播放m3u8,mp4,flv格式的视频

    一.这里我主要是播放m3u8的视频,有两款比较好的插件,swise和ckpalyer,我介绍的是ckplayer,这是在pc端播放的,并且是需要flash支持的,不过现在的最新浏览器都是默认安装的 二 ...

  7. chrome播放m3u8視頻失败

    由于项目后台需要播放m3u8视频,但此视频格式在移动端和Safari支持比较友善但是PC浏览器中都不太尽如人意,所以想在Chrome中播放只能借助第三方插件来播放. 有一款Video.js插件极大的简 ...

  8. 【开源技术分享】无需流媒体服务,让浏览器直接播放rtsp/rtmp的神器:EasyMedia

    不同于市面上其他需要各种转发到流媒体服务的中间件来说,EasyMedia不需要依赖任何nginx-rtmp,srs,zlmediakit等等第三方流媒体服务,只需要你有rtsp或者rtmp等等协议的视 ...

  9. PC浏览器播放m3u8

    HLS(HTTP Live Streaming)是苹果公司针对iPhone.iPod.iTouch和iPad等移动设备而开发的基于HTTP协议的流媒体解决方案.在 HLS 技术中 Web 服务器向客户 ...

随机推荐

  1. P5518 [MtOI2019]幽灵乐团 / 莫比乌斯反演基础练习题

    瞎扯 建议在阅读题解之前欣赏这首由普莉兹姆利巴姐妹带来的的合奏. Q:你参加省选吗?不是说好了考完 NOIP 就退吗. A:对啊. Q:那你学这玩意干啥? A:对啊,我学这玩意干啥? 写这题的动机? ...

  2. Python骚操作从列表推导和生成器表达式开始

    序列 序列是指一组数据,按存放类型分为容器序列与扁平序列,按能否被修改分为不可变序列与可变序列. 容器序列与扁平序列 容器序列存放的是对象的引用,包括list.tuple.collections.de ...

  3. mac或linux常见命令

    1. 用某个软件打开某文件,如subline text: https://blog.csdn.net/Cinderella_hou/article/details/82392139 如果想使用subl ...

  4. JavaScript——DOM操作

    DOM-(Document Object Model)即文档对象模型. JavaScript可以动态地修改DOM,从而来修改HTML的内容. 查找HTML元素 通过 id 找到 HTML 元素 通过标 ...

  5. Java——I/O,字节流与字符流,BufferedOutputStream,InputStream等(附相关练习代码)

    I/O: I/O是什么? 在程序中,所有的数据都是以流的形式进行传输或者保存. 程序需要数据的时候,就要使用输入流读取数据. 程序需要保存数据的时候,就要使用输出流来完成. 程序的输入以及输出都是以流 ...

  6. Linux-CentOS7环境MySQL安装配置

    Linux-CentOS7环境MySQL安装配置 1. 安装准备 (1)检查MySQL是否已安装 (2)如果有的话,就全部卸载 2. 安装libaio (1)检索相关信息: (2)安装依赖包: 3. ...

  7. 获取 *.properties配置文件内容

    package com.loan.modules.common.util; import java.util.ResourceBundle; /** * 获取 *.properties配置文件内容 * ...

  8. WLAN参数释义及优化建议

    1.AP覆盖范围或天线角度 1)参数释义 AP覆盖范围或天线角度直接影响到了终端连接到WLAN的信号强度. 2)优化建议 在设备的工程安装过程中,合理选择AP的位置,合理调整AP的覆盖方向或外置天线的 ...

  9. K8s client 使用

    使用的k8s client包: <dependency> <groupId>io.fabric8</groupId> <artifactId>kuber ...

  10. Flink-v1.12官方网站翻译-P018-Event Time

    事件时间 在本节中,您将学习如何编写时间感知的Flink程序.请看一下及时流处理,了解及时流处理背后的概念. 关于如何在Flink程序中使用时间的信息请参考windowing和ProcessFunct ...