videojs集成--播放rtmp流

之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。

 

首先要先有一个文件，那就是video-js.swf

因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。

代码就是下面这样。

里面一些细节注释都有。

重点就是看<video>标签里面的内容

 

[html] view plain copy

 

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta http-equiv="Access-Control-Allow-Origin" content="*">  
  5.     <meta charset="utf-8">  
  6.     <meta name="description" content="Opencast Media Player">  
  7.     <meta name="author" content="Opencast">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  9.     <title>RTMP播放</title>  
  10.     <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">  
  11.     <link rel="stylesheet" type="text/css" href="css/core_global_style.css">  
  12.     <script src="videojs/jquery.js"></script>  
  13.     <script src="videojs/video.js"></script>  
  14.     <link href="videojs/video-js.css" rel="stylesheet">  
  15.     <script>  
  16.         videojs.options.flash.swf = "videojs/video-js.swf";//flash路径，有一些html播放不了的视频，就需要用到flash播放。这一句话要加在在videojs.js引入之后使用  
  17.     </script>  
  18. </head>  
  19. <body >  
  20. <div id="engage_view" style="display: block;">  
  21.     <div id="engage_content">  
  22.         <div id="engage_resize_container">  
  23.   
  24.             <div id="engage_video">  
  25.                 <!-- theodul video videojs plugin desktop mode  controls preload="auto"  
  26.                         vjs-big-play-centered 播放按钮居中  
  27.                         poster默认的显示界面，就是还没点播放，给你显示的界面  
  28.                         controls  
  29.                         preload="auto" 是否提前加载  
  30.                         autoplay 自动播放  
  31.                         loop=true 自动循环  
  32.                         data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}  
  33.                 -->  
  34.                 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  
  35.                        poster="videojs/eguidlogo.png" width="800" height="600"  
  36.                 >  
  37.                     <!--  
  38.                         <source src="../output.mp4" type='video/mp4'>  mp4格式  
  39.                         <source src='rtmp://127.0.0.1/hls/test' type='rtmp/flv'/> rtmp格式  
  40.                         <source src='http://127.0.0.1/hls/test.m3u8' type='application/x-mpegURL'/>  m3u8格式  
  41.                         <source src='http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8' type='application/x-mpegURL'/> m3u8格式，可用  
  42.                     -->  
  43.                     <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>  
  44.                 </video>  
  45.   
  46.                 <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    -->  
  47.                 <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址-->  
  48.             </div>  
  49.         </div>  
  50.         <!-- timeline plugin container -->  
  51.     </div>  
  52. </div>  
  53. <div class="clear"></div>  
  54. <div id="information_wrapper">  
  55.     <!-- description plugin container -->  
  56.     <div id="engage_description"><!-- theodul description plugin desktop mode -->  
  57.   
  58.         <div id="engage_basic_description"></div>  
  59.   
  60.     </div>  
  61. </div>  
  62. <div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->  
  63. </div>  
  64.   
  65. <script src="videojs/videojs-media-sources.min.js"></script>  
  66. <!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->  
  67. <script src="videojs/videojs.hls.min.js"></script>  
  68. <script>  
  69.   
  70.     //播放的话，就直接使用下面2行  
  71.     //后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好  
  72.     var player = videojs('my-video');  
  73.     player.play();  
  74.     /*  
  75.     (function ($) {  
  76.   
  77.         var resetVideoSize = function (myPlayer) {  
  78.             var videoJsBoxWidth = $(".video-js").width();  
  79.             var ratio = 1440 / 900;  
  80.             var videoJsBoxHeight = videoJsBoxWidth / ratio;  
  81.             myPlayer.height(videoJsBoxHeight);  
  82.         }  
  83.   
  84.         $(window).on("resize", function () {  
  85.             resetVideoSize(myPlayer);  
  86.         });  
  87.         myPlayer.play();  
  88.     })(jQuery)  
  89.   
  90.     function changeSrc() {  
  91.         var src = "http://127.0.0.1/hls/test.m3u8";  
  92.         var myPlayera = videojs("my-video");  
  93.         $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  94.         myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址  
  95.         myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载  
  96.     }  
  97.     */  
  98.     function changeSrc(src) {  
  99.   
  100.         var myPlayera = videojs("my-video");  
  101.         //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  102.         myPlayera.src(src); //重新初始化视频地址  
  103.         myPlayera.load(src); //重新加载  
  104.     }  
  105. </script>  
  106.   
  107. </body>  
  108. </html>  
时间： 2024-09-24 05:25:48

videojs集成--播放rtmp流的相关文章

2.2.1版本的vlc播放rtmp流会自动断开，而2.2.1以下的版本都不会

问题描述 2.2.1版本的vlc播放rtmp流会自动断开,而2.2.1以下的版本都不会 2.2.1版本的vlc播放rtmp流会自动断开,而2.2.1以下的版本都不会通过vlc的 工具->编码器信息->统计 这里面可以发现2.2.1版本的vlc播放时候会直接丢掉前面一些帧,比如一次丢掉34帧,然后进行播放,后面都很正常,但是vlc2.2.1 它不会一次直接丢掉前面的34个无效帧,而是直接播放,这样发送数据时候过快,client还未来得及处理,结果client端就直接断开了,但是断开后,rtmp

rtmp延时 vlc ffplay-ffplay和vlc播放rtmp流延迟不一致，如何消除延迟

问题描述 ffplay和vlc播放rtmp流延迟不一致,如何消除延迟 公司写了一个rtmp server,从摄像头获取的.h264流封装后发送到client端 1,用ffplay播放这个rtmp流,延迟有4秒,但是我在画面上右击几下,发现延迟很短了,基本上算是同步上了,这个是啥原因?右击或左击都会打印[swscaler @ 0xb56c7d20] deprecated pixel format used, make sure you did set range correctly 这个是干啥子的

potplayer-potPlayer播放rtmp流，经过一段时间，输出帧率变为原来的10分之1

问题描述 potPlayer播放rtmp流,经过一段时间,输出帧率变为原来的10分之1 potPlayer播放rtmp流,经过一段时间,输出帧率变为原来的10分之1, 导致图像很卡,请问这个是啥原因造成的! 解决方案 开启dxva加速就没这种问题了,O(∩_∩)O~, F5 找到滤镜 ,视频解码器,然后设置dxva,开启就行了 解决方案二: 现在的rtmp基本上看不出延迟,100ms以内吧,只不过现在还有个问题就是扩展时间戳的问题,目前正在着手搞,不用扩展时间戳,5小时不到就gameover了,

流媒体技术学习笔记之（二）RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)

user www www; worker_processes 1; error_log logs/error.log debug; #pid logs/nginx.pid; events { worker_connections 65535; } rtmp { server { listen 1935; application live { live on; record off; } application live2 { live on; record off; } # applicatio

vlc rtmp 顿卡-vlc播放 推送到本地的rtmp流会顿卡

问题描述 vlc播放 推送到本地的rtmp流会顿卡 使用ffmpeg -re -i test.flv -vcodec copy -acodec copy -f flv -y rtmp://localhost/live/live1 推送rtmp流到本地的rtmp服务器,然后使用ffplay播放rtmp流,一切正常,但是使用vlc播放时候,中间会有卡的现象,一般卡10秒左右,播放到后面卡的现象就少了. 我觉得好像是vlc的问题,抓包发现window is full,应该是这个原因引起的,就是wind

android播放实时rtmp流该怎么播放。新手求大神指导

问题描述 android播放实时rtmp流该怎么播放.新手求大神指导 给一个这个rtmp://58.61.150.201/vepkgr/aps3的实时流 我该怎么用android播放出来? SurfaceView吗?

ffmpeg rtsp rtmp-Ubuntu上用FFmpeg将rtsp流转换成rtmp流出错！

问题描述 Ubuntu上用FFmpeg将rtsp流转换成rtmp流出错! 使用"ffmpeg -i rtsp://admin:12345@172.27.35.55 -f flv rtmp://172.27.35.2/live/stream"命令时出错 其中172.27.35.2是我电脑的IP,172.27.35.55是网络摄像机的IP 解决方案 你本地有LiveServer吗?https://github.com/winlinvip/simple-rtmp-server

android 播放mp3-android　如何播放mp3流

问题描述 android 如何播放mp3流 byte[] mp3Data = ........................................... 这里存的是mp3 byte型数据,如何播放 求解答哦 ps:也或抛给系统自动播放也行啊,如何抛这个数据啊

ffmpeg推送rtmp流到nginx问题

问题描述 ffmpeg推送rtmp流到nginx问题 解决方案 为什么会出现红色字体的问题呢?求助啊