https://github.com/jiqing9006/hLive

<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8 />

    <title>fz-live</title>

    <link href="./css/video.css" rel="stylesheet">

    <script src="./js/video.js"></script>

    <script src="./js/videojs-live.js"></script>

</head>

<body>

    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup='{}'>

        <source src="./src/z.m3u8" type="application/x-mpegURL">

    </video>

    <script>

        var liveUrl  =  'http://pili-live-hls.qiniu.yunlutong.com/yunlutong/598daedea95be73db168e955.m3u8';

        var player = videojs('my_video_1');

        player.ready(function() {

            this.src({

                src: liveUrl,

                type: 'application/x-mpegURL',

            });

        });

    </script>

</body>

</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. ASP.NET-未解决的问题

    001.((FormsIdentity)User.Identity).Ticket.UserData 用ASP.NET后台格式化成json数据后传回去的数据有&quot这样的符号 002.HT ...

  2. POJ 2183

    模拟题 #include <iostream> #include <cstdio> #include <algorithm> using namespace std ...

  3. android 读取xml

    在有些应用中,有一点小数据.直接存储在XML就是.实现较为简单, 1.xml文件放入asset目录.结构如: <?xml version="1.0" encoding=&qu ...

  4. 从QQ聊天看交流的有效性

    首先让我们看一则约10分钟的QQ群聊天记录.截图例如以下.已经进行了隐私保护. 交流的主体为大二的在校生与刚刚毕业的学长之间的对话,学长參加过培训,在校学弟想了解一下.故有了以下的交流.(从上到下,从 ...

  5. 带你认识 MySQL 之 MySQL 体系结构

    序 近期一直在忙项目,各种加班加点,项目上线.渐渐的没有了学习的时间.这不,刚这几天才干抽出点时间.忙里偷闲,正在看一本数据库的书籍.相信非常多小伙伴们也都看过 - - <MySQL 技术内幕: ...

  6. 【c++版数据结构】之顺序表的实现

    SeqList.h #ifndef SEQLIST_H #define SEQLIST_H #include<iostream> using namespace std; typedef ...

  7. Codeforces 13C Sequence dp

    题目链接:http://codeforces.com/problemset/problem/13/C 题意: 给定n长的序列 每次操作能够给每一个数++或-- 问最少须要几步操作使得序列变为非递减序列 ...

  8. Wing IDE 怎样设置 python版本号

    机器上同一时候装了Python3和Python2,使用Wing IDE, 由于Python2和3是有非常大的差别的,所以时不时的须要更改IDE使用的Python版本号.以下介绍方法: 1.打开Edit ...

  9. CentOS6.3升级GCC到GCC4.8.2

    server上安装的GCC版本号过旧.已经不满足个人使用的版本号需求,故决定对其进行升级操作.由当前版本号3.4.6升级到4.8.2.然受权限制约.仅仅能安装到个人文件夹.因此假设您的server能够 ...

  10. &quot;singleTask&quot;模式 切换到新的栈中

    本文截取了网络资源的结论部分 对singletask 启动模式做笔记记录. 尽管SubActivity的launchMode被设置为"singleTask"模式,可是它并不像官方文 ...