当前位置: 首页 > news >正文

HTML5播放 M3U8的hls流地址

在HTML5页面上播放M3U8的hls流地址

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="video" style="border: 1px solid red;" width="640" height="480" controls autoplay></video>

    <script>
        if (Hls.isSupported()) {
            var videoElement = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource('http://220.161.87.62:8800/hls/0/index.m3u8'); // M3U8地址,根据实际情况修改
            hls.attachMedia(videoElement);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                videoElement.play();
            });
        }
    </script>
</body>
</html>

实现效果

http://www.lryc.cn/news/197138.html

相关文章:

  • leetcode:101.对称二叉树
  • UI自动化的适用场景,怎么做?
  • SpringFramewrok (1)
  • 电商独立站小程序开发方案
  • 数据库安全运维是什么意思?数据库安全运维系统用哪家好?
  • 小程序的console中出现:。。。不在以下 request 合法域名列表中,请参考文档:。。。的报错解决
  • 计算机网络基础(三):IPv4编址方式、子网划分、IPv4通信的建立与验证及ICMP协议
  • Error: GlobalConfigUtils setMetaData Fail Cause:java.lang.NullPointerException
  • OpenHarmony 应用全局的 UI 状态存储:AppStorage
  • 外置告警蜂鸣器使用小坑
  • SSO身份验证如何帮助加强密码安全性
  • JIRA 在 2024 年完全停止服务器版本支持
  • Ubuntu18.04安装gdal3.4
  • C#好资源网址推荐
  • UE5 Python脚本自动化Sequence Key帧
  • 2023年整理的自动化测试面试题及答案
  • docker 命令记录
  • 二、ElasticSearch中索引库与文档操作
  • few shot learnning笔记
  • 2022最新版-李宏毅机器学习深度学习课程-P25 Spacial Transformer Layer
  • 轻松上手,制作电子期刊就这么简单
  • 网络电视机顶盒怎么样?内行揭晓网络电视机顶盒排名
  • 2023秋招华为技术岗线上面试经历
  • 保姆级VitrualBox下载ubantu
  • 【学习笔记】RabbitMQ-6 消息的可靠性投递2
  • 黑豹程序员-知识点-写一个bat一次执行多条命令
  • 从头开始机器学习:线性回归
  • 1-k8s1.23.6-底座搭建-基于docker
  • 【SA8295P 源码分析 (一)】76 - Thermal 功耗 之 /dev/thermalmgr 相关调试命令汇总
  • 每日汇评:随着上升趋势的恢复,黄金在1950美元上方等待破位