zoukankan      html  css  js  c++  java
  • 【随手记录】vedio标签展示rtmp协议视频流

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videojs</title>
        <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
    </head>
    <body>
        <video id="myvideo" class="video-js" controls preload="auto" width="640" height="500"
                poster="http://live-snapshot.test.com/PiliSDKTest/streamkey.jpg" data-setup="{}">
            <source src="rtmp://视频流地址" type='rtmp/vlc'>
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
      </video>
        
        <script>
            var myvideo=videojs("myvideo");
            myvideo.on("ended",function(){
                console.log("视频播放结束");
            })
            myvideo.on("pause",function(){
                console.log("点击暂停");
            })
            myvideo.on("play",function(){
                console.log("点击播放");
            })
            myvideo.on("volumechange",function(){
                console.log("声音改变");
            })
            myvideo.on("timeupdate",function(){
                console.log("视频播放中");
            })
            myvideo.on("seeked",function(){
                console.log("视频跳转结束");
            })
            myvideo.on("seeking",function(){
                console.log("视频跳转中");
            })
        </script>
    </body>
    </html>

    近期项目上要跟电信对接,展示电信提供的监控点的视频,对方提供的是rtmp协议的流数据,采用vedio标签,引入video.js即可浏览,

    如果遇见报错

    videojs播放rtmp流提示 No compatible source was found for this video

    有几个点需要注意:

    1、vediojs版本 降到 5
    2、放到 tomcat、nginx等容器发布 不要直接访问html
    3、打开浏览器flash限制 允许flash插件!
    4、video 大小配置 preload="auto" width="640" height="500"
    5、还播放不了 确认是否是 直播源有问题!

  • 相关阅读:
    Xcode waring: no rule to process file *** 警告提示
    Assigning to "id<CALayerDelegate> _Nullable" from incompatible type "ZXCapture *const __strong" 的警告提示信息
    图片编码简介
    oc温习八:static、extern、const 的了解
    转:Objective-C新特性__nonnull和__nullable
    oc温习七:结构体与枚举
    oc温习六:预处理指令
    oc温习五:字符串
    OC温习四:数组
    oc温习三:常用函数
  • 原文地址:https://www.cnblogs.com/whaleX/p/13954799.html
Copyright © 2011-2022 走看看