html5播放m3u8视频,web端看直播

简介:

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>

注意的地方,必须是通过服务器访问,才有效。
直接右击打开,看不到效果。

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



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/7574603.html,如需转载请自行联系原作者

相关文章
|
14天前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为&#39;eager&#39;,并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
22天前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
20 6
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
47 3
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
35 2
|
1月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
46 2
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
29 1
|
1月前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
26 1
|
1月前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
33 1
|
22天前
|
Web App开发 存储 JavaScript
HTML一个简单的视频提速写法构思
HTML一个简单的视频提速写法构思