在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. 正则re高级用法

    search 需求:匹配出文章阅读的次数 #coding=utf-8 import re ret = re.search(r"\d+", "阅读次数为 9999" ...

  2. 那些我们不知道的 Python 免费学习资料

    作者:小R编辑:AI 兔兔 Python 语言因为其易学,以及强大的功能,是很多刚开始学习编程的入门语言的选择之一. Python 语言被列入中小学教材后引起了越来越多人的关注. 希望孩子学习编程的家 ...

  3. hashlib,configparser,logging

    # hash: 算法, 结果是什么? 是内存地址, # print(hash('123')) # dic = {'name':'alex'} # print(hash('name')) # print ...

  4. Xctf-easyapk

    Xctf-easyapk Write UP 前期工作 查壳 无壳 运行 没什么特别的 逆向分析 使用jadx反编译查看代码 先看看文件结构 MainActivity代码 public class Ma ...

  5. jQuery——操作DOM

    所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQue ...

  6. Java IO--字节流与字符流OutputStream/InputStream/Writer/Reader

    流的概念 程序中的输入输出都是以流的形式保存的,流中保存的实际上全都是字节文件. 字节流与字符流 内容操作就四个类:OutputStream.InputStream.Writer.Reader 字节流 ...

  7. C++基本之--静态成员函数和静态成员变量

    #include <iostream> using namespace std; class Internet { public: Internet(char *name,char *ad ...

  8. OpenStack (cinder存储服务)

    cinder简介 提供 OpenStack 存储块(Volume)服务,该管理模块原来也为 Nova 的一部分,即 Nova-volume,后来从 Folsom 版本开始使用 Cinder 来分离出块 ...

  9. OpenStack (horizon Web管理界面)

    horizon 简介 Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , 管理员可以使用通过 WE ...

  10. Codeforces Round #648 (Div. 2) C. Rotation Matching

    题目链接:https://codeforces.com/contest/1365/problem/C 题意 有两个大小为 $n$ 的排列,可以循环左移或右移任意次,问最多有多少对同一值在同一位置. 题 ...