zoukankan      html  css  js  c++  java
  • 使用video.js 7在html中播放rtmp视频流

    1.背景

    最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播。

    经查询,了解到可以用ckplayer(有许可条款)和video.js在html页面中。尝试了video.js_5.x可以正常播放,而6.x版本不能播放,可目前video.js已经更新到了7.x!

    几经折腾,发现6.x版本后需要单独的flash插件,早期版本包含了flash,官方说明如下:

    2.示例

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Live Video 7.X</title>
     7     <link href="./lib/video7.3.0/video-js.min.css" rel="stylesheet">
     8     <script src="./lib/video7.3.0/video.min.js"></script>
     9     <script src="./lib/flash/videojs-flash.min.js"></script>
    10 </head>
    11 
    12 <body>
    13     <video id="liveVideo" class="video-js" controls autoplay preload="auto" width="1280"
    14         height="720" data-setup="{}">
    15         <source src="rtmp://192.168.3.161:1935/live/livestream" type="rtmp/flv">
    16     </video>
    17 </body>
    18 </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视频流的方法,欢迎留言交流~

  • 相关阅读:
    今晚学到了2.2
    默默开始学英语了。
    VBScript连接数据库
    关于selenium截图
    Python异常处理try...except、raise
    Django中contenttype的应用
    Django Rest Framework
    scrapy信号扩展
    scrapy_redis使用
    Twisted模块
  • 原文地址:https://www.cnblogs.com/jyughynj/p/11927661.html
Copyright © 2011-2022 走看看