html5播放 m3u8

注意:m3u8地址要为网络地址,直接把代码复制为html直接在本地打开,可能不行,需要放在nginx或者apache或者其他的web服务器上运行。

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>测试播放m3u8</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
            type="text/javascript"></script>
</head>
<body>

<video id="videoPlayer" class="video-js" controls style="width:300px;height:300px;">
    <source src="http://192.168.0.101:8178/kbkbk/index.m3u8" type="application/x-mpegURL">
</video>

<script>
    videojs('videoPlayer', {});
</script>

</body>
</html>
相关推荐
鹏多多15 分钟前
Web浏览器后台离线通知方案实现以及兼容指南
前端·javascript·vue.js
yangmu320318 分钟前
Vue3 响应式系统深度解析:从 Proxy 到依赖追踪
前端·javascript·vue.js
Asize38 分钟前
Node path 与 fs 模块:从回调地狱到 async await 的异步进化
javascript·node.js
大家的林语冰3 小时前
😭 Electron 麻了,Deno 直接支持二进制应用,无需第三方桌面应用框架!
前端·javascript·node.js
Ivanqhz3 小时前
NFM(神经因子分解机)
开发语言·javascript·人工智能·算法·蓝桥杯
用户298698530144 小时前
在 React 中拆分 Excel 文件:从工作表到行列的实践
javascript·react.js·excel
想要成为糕糕手4 小时前
238. 除了自身以外数组的乘积 — 面试向深度解析
javascript·算法·面试
kisshyshy4 小时前
前端存储、表单异步提交与 this 指向完全指南
前端·javascript·html
Kel4 小时前
管道、IPC、Socket:你以为的三种技术,其实是同一件事
javascript·设计模式·node.js
心中有国也有家4 小时前
AtomGit Flutter 鸿蒙客户端: AnimatedScale 与 AnimatedContainer 联合实战
android·javascript·flutter·华为·harmonyos