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. HDU 4253 Two Famous Companies

    Two Famous Companies Time Limit: 15000ms Memory Limit: 32768KB This problem will be judged on HDU. O ...

  2. [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

    In some cases your application might need to upload large amounts of data, such as files. Obviously ...

  3. 多项福利回馈会员，且看Hao123怎样玩转“霸权主义”

        谈到"霸权主义",我们非常easy将其与国际政治联系在一起.只是.霸权主义可不全然用来形容政治,在7月14日,Hao123上线了一个会员福利活动,命名为"Hao1 ...

  4. CCControlExtension/CCControlPotentiometer

    #ifndef __CCCONTROLPOTENTIOMETER_H__ #define __CCCONTROLPOTENTIOMETER_H__ #include "CCControl.h ...

  5. ThinkPHP5.0最最最最最简单实例

    ThinkPHP5.0最最最最最简单实例 一.效果图 二.操作步骤 1.用mysql数据库建立数据库 2.按照ThinkPHP官网的指示装好ThinkPHP5.0 tp5里面的目录结构如下: 3.配置 ...

  6. vim编辑器常用语法

    1)yy (功能描述:复制光标当前一行) y数字y (功能描述:复制一段(从第几行到第几行))2)p (功能描述:箭头移动到目的行粘贴)3)u (功能描述:撤销上一步)4)dd (功能描述:删除光标当 ...

  7. IP地址的正则表达式写法

    这里讲的是IPv4的地址格式,总长度 32位=4段*8位,每段之间用.分割, 每段都是0-255之间的十进制数值. 将0-255用正则表达式表示,可以分成一下几块来分别考虑: 取值区间 特点 正则写法 ...

  8. IOS设备获取崩溃日志的办法

    除了用xcode 的devices功能获取之外,在windows下面也是可以获取的.首先安装itools.下载地址: http://www.itools.cn/ 安装好后将设备(iphone或ipad ...

  9. 监控RMAN操作进度的脚本

    REM ------------------------------- REM Script to monitor rman backup/restore operations REM To run ...

  10. H5教程：移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越 ...