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. POJ 1107

    水题一道,注意取模时不能为0 #include <iostream> #include <algorithm> #include <cstring> #includ ...

  2. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览 应用程序授权

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第10章节--SP2013中OAuth概览  应用程序授权         一个应用程序调用SP API被验证后,安全处理 ...

  3. bzoj1830: [AHOI2008]Y型项链(LCP+贪心)

    1830: [AHOI2008]Y型项链 题目:传送门 简要题意: 给出三个字符串,可以对任意字符串进行操作,每次操作都可以再其中一个字符串的末尾删除或添加一个字符,求最小操作数使得所有的字符串相同 ...

  4. Linux就该这么学 20181007第十章Apache)

    参考链接https://www.linuxprobe.com/ /etc/httpd/conf/httpd.conf 主配置文件 SElinux域 ---服务功能的限制 SElinux安全上下文 -- ...

  5. 【转】IIS初始化（预加载），解决第一次访问慢，程序池被回收问题

    原地址:http://www.debugrun.com/a/mpyWXwg.html 读在最前面: 1.本文以IIS8,Windows Server 2012R2做为案例 2.IIS8 运行在 Win ...

  6. 持久层框架Clone

    Clone框架:http://www.52chloe.com/Wiki/Document/3324802610879266816 Clone框架支持多种数据库,我用的是sql server 基本查询: ...

  7. 关于AJAX异步请求的那些事儿(1)

    1.什么事AJAX? Asynchronous Javascript And XML:异步的JS和XML,由Google2002年在GoogleSuggest应用提出,目标实现客户端和服务器“同时”运 ...

  8. swift内存管理

    为了解决引用循环的问题. However, with ARC, values are deallocated as soon as their last strong reference is rem ...

  9. Synchronization (computer science)

    过程同步.数据同步. In computer science, synchronization refers to one of two distinct but related concepts: ...

  10. Hadoop不同模式下关键配置属性

    Hadoop分为三种模式: 独立(或本地)模式. 伪分布模式. 全分布模式 不同模式下关键配置项及属性内容如下面表格所示 组件名称 配置的文件名 属性名称 独立模式 伪分布模式 全分布模式 Commo ...