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,如需转载请自行联系原作者

相关文章
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
37 0
|
5月前
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
219 0
|
5月前
|
编解码 移动开发 JavaScript
html页面播放视频编码是265的m3u8的流媒体地址
html页面播放视频编码是265的m3u8的流媒体地址
101 0
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
101 1
|
29天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
47 3
Web前端全栈HTML5通向大神之路
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。