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. NYIST 489 哭泣天使

    哭泣天使时间限制:1000 ms | 内存限制:65535 KB难度:5 描述Doctor Who乘着Tardis带着Amy来到了一个星球,一开Tadis大门,发现这个星球上有个壮观的石像群,全是一些 ...

  2. ASP.NET-技巧01

    ==符号的写法 ViewBag.StatusMessage = message == ManageMessageId.ChangePasswordSuccess ? "你的密码已更改.&qu ...

  3. POJ 3071

    求概率.其实跟枚举差不多,输入n即是要进行n轮比赛.对每一支球队,设求1的概率,首先1要与2比赛为p1,这是第一轮,第二轮时,1要与3(打败3为p2),4(打败4为p3)中胜者比赛,由于是概率,则两者 ...

  4. 任务调度器quartz的使用

    1.quartz的获取. 可參照:Quartz任务调度模型实例 2.开发思路: 要使用定时器quartz.先弄清楚三个概念:调度器.任务.触发器.开发也是依照这三个方面来开发, 1>写一个Job ...

  5. PyQt: LineEdit的智能输入提示

    使用的的类是QtGui.QCompleter from PyQt4 import QtGui,QtCore str = QtCore.QStringList(['a','air','airbus']) ...

  6. 开源TT框架上的日志类

    public class Logger { /** * log tag */ private String tagName = "MoGuLogger";// tag name / ...

  7. 外面的wifi非常精彩，外面的wifi非常不安

    星期一果然非常忙,看到安卓漏洞还是午休的时候.可能我们都习惯了.我们的信息安全一向难以得到保障.对于我来说,可能都无所谓了.可是作为用户之中的一个,我们也不能太安分,该须要的保障还是得维护. 本来.我 ...

  8. 15.boost最小生成树 prim_minimum_spanning_tree

    #include <iostream> #include <boost/config.hpp> //图(矩阵实现) #include <boost/graph/adjac ...

  9. POJ 3044单调栈

    题意: 思路: 单调栈 // by SiriusRen #include <stack> #include <cstdio> using namespace std; stac ...

  10. CDN(Content Distribution Network)概念

    CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...