使用video.js 7在html中播放rtmp视频流
2024-08-26 21:47:13
1.背景
最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播。
经查询,了解到可以用ckplayer(有许可条款)和video.js在html页面中。尝试了video.js_5.x可以正常播放,而6.x版本不能播放,可目前video.js已经更新到了7.x!
几经折腾,发现6.x版本后需要单独的flash插件,早期版本包含了flash,官方说明如下:
2.示例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Live Video 7.X</title>
<link href="./lib/video7.3.0/video-js.min.css" rel="stylesheet">
<script src="./lib/video7.3.0/video.min.js"></script>
<script src="./lib/flash/videojs-flash.min.js"></script>
</head> <body>
<video id="liveVideo" class="video-js" controls autoplay preload="auto" width="1280"
height="720" data-setup="{}">
<source src="rtmp://192.168.3.161:1935/live/livestream" type="rtmp/flv">
</video>
</body>
</html>
引入了video.js、video.js和videojs-flash.js,添加video标签,设置autoplay、width、height等属性,data-setup属性必须要,如果不做设置一定写成“{}”,
设置source的src和type属性,可以先通过ffplayer客户端工具查看视频流是否能够播放。
3.注意事项及完整示例
不支持文件方式打开页面,必须是http方式访问页面,可以通过nginx或使用编辑器的内置server,如vscode的live server;
video.js的github地址:https://github.com/videojs/video.js
videojs-flash的github地址:https://github.com/videojs/videojs-flash
完整代码参考:https://github.com/shiyuan598/live-video
简单记录一下在html中使用vedio.js6以上版本播放rtmp视频流的方法,欢迎留言交流~
最新文章
- netlink优势
- 完全卸载Oracle11G
- Android 手机卫士--九宫格使用
- C# 总复习
- Linux comands
- Tarjan+模板
- sql2000
- Hibernate二 映射 注解 一级缓存
- java开发中的23中设计模式
- DOM 添加 / 更新 / 删除 XML (CURD)
- OpenTK教程-2绘制一个三角形(正确的方法)
- jQuery中getJSON跨域原理详解
- C#截取当前活动窗体的图片
- 如何给filter添加自定义接口
- Python能做些什么?
- [CF543A]/[CF544C]Writing Code
- Runtime-消息发送和消息转发
- IGMP协议
- Python全栈-day1-day2-计算机基础
- Y组合子