https://github.com/jiqing9006/hLive

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset=utf-8 />
  6.     <title>fz-live</title>
  7.     <link href="./css/video.css" rel="stylesheet">
  8.     <script src="./js/video.js"></script>
  9.     <script src="./js/videojs-live.js"></script>
  10. </head>
  12. <body>
  13.     <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup='{}'>
  14.         <source src="./src/z.m3u8" type="application/x-mpegURL">
  15.     </video>
  16.     <script>
  17.         var liveUrl  =  'http://pili-live-hls.qiniu.yunlutong.com/yunlutong/598daedea95be73db168e955.m3u8';
  18.         var player = videojs('my_video_1');
  20.         player.ready(function() {
  21.             this.src({
  22.                 src: liveUrl,
  23.                 type: 'application/x-mpegURL',
  24.             });
  25.         });
  27.     </script>
  28. </body>
  30. </html>

注意的地方，必须是通过服务器访问，才有效。

直接右击打开，看不到效果。

可以更改地址，很灵活，很方便。

html5播放m3u8视频，web端看直播的更多相关文章

  1. html5播放mp4视频代码

    1.nginx支持flv和mp4格式播放 默认yum安装nginx centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的 # nginx -V查看是否安 ...

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

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

  3. 使HTML5支持RTSP流 微信直播RTSP流 微信播放RTSP直播流（HTML5播放rtsp，web播放rtsp，微信支持rtsp）

    一.大家都知道HTML5的VIDEO可以播放视频,但是H5不支持RTSP播放,所以需要中间件! 二.我们经理长年的努力,开发了HTML5支持RTSP的中间件,使HTML5支持RTSP直播! 三.不卡顿 ...

  4. 用HTML5播放IPCamera视频

    HTML5增加了vedio标签,能直接播放视频,但是播放的格式是有限的. 这里将IPCamera的视频转换OGG格式,再通过HTML5网页播放,播放还是很清晰的.IPCamera要支持RTSP等视频流 ...

  5. H5外包团队:使用HTML5播放短视频代码分享

    滑动代码 /** * 滑动处理 */ function Touch() { this.init(); } Touch.fn = Touch.prototype; Touch.fn.init = fun ...

  6. 在浏览器上播放m3u8视频

    在edge上有效 <video width="600" controls> <source src="https://www.gentaji.com/2 ...

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

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

  8. Android[安德鲁斯] 文本Air Video 远程播放电脑视频

    苹果iOS下列.目前应用Air Video,能力iOS由Wifi远程直接播放电脑视频,无需看视频复制到手机.非常好用!最近使用Android打电话.展望类别似应用,找了很长一段时间没有找到.在仔细的思 ...

  9. chrome播放m3u8視頻失败

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

随机推荐

  1. nodejs是一个平台，是平台

    node.js是用javascript来写服务器代码的平台

  2. ValidForm的使用

    1.引入css 请查看下载文件中的style.css,把里面Validform必须部分拷贝到你的css中(文件中这个凝视 "/*==========下面部分是Validform必须的==== ...

  3. bzoj2734【HNOI2012】集合选数

    2734: [HNOI2012]集合选数 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 831  Solved: 487 [Submit][Stat ...

  4. MVC开发模式详解

    转自:https://blog.csdn.net/qq_33991989/article/details/78966071 MVC设计模式详解 1.Model-View-Controller(模型-视 ...

  5. POJ 3299 模拟

    水题,但是WA了一屏--- swap的时候忘了把读入的数字也swap了---------..[尴尬] // by SiriusRen #include <cmath> #include & ...

  6. java的可查的异常和不可查的异常讲解

    java的可查的异常和不可查的异常讲解: Java的异常(包括Exception和Error)分为:可查的异常(checked exceptions)和不可查的异常(unchecked excepti ...

  7. asp.net 汉字转拼音的车祸现场

    asp.net 汉字转拼音 需求背景: 昨天遇到个问题,就是面对系统中集中性的要设置大批量的用户设置默认的用户名,密码,权限(角色),同时要求用户名是姓名的全拼,回头看看旁边那个哥们撸胳膊挽袖子准备一 ...

  8. HTTP的请求及响应

    前言 本文主要包括以下内容: HTTP是什么? HTTP 请求包括哪些部分? HTTP 响应包括哪些部分? 如何用Chrome开发者工具查看 HTTP 请求及请求的内容? 如何使用 curl 命令? ...

  9. Ubuntu 16.04下安装64位谷歌Chromium(Chrome)浏览器

    在命令行下输入: sudo add-apt-repository ppa:a-v-shkop/chromium sudo apt-get update sudo apt-get install chr ...

  10. java 获取线程id

    如何获取正在运行的线程的ID? 解决方法 下面的示例演示如何使用getThreadId() 方法一个正在运行线程的ID. public class Main extends Object implem ...