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

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

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

代码就是下面这样。

里面一些细节注释都有。

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

  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. <div id="engage_video">
  24. <!-- theodul video videojs plugin desktop mode  controls preload="auto"
  25. vjs-big-play-centered 播放按钮居中
  26. poster默认的显示界面，就是还没点播放，给你显示的界面
  27. controls
  28. preload="auto" 是否提前加载
  29. autoplay 自动播放
  30. loop=true 自动循环
  31. data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}
  32. -->
  33. <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
  34. poster="videojs/eguidlogo.png" width="800" height="600"
  35. >
  36. <!--
  37. <source src="../output.mp4" type='video/mp4'>  mp4格式
  38. <source src='rtmp://127.0.0.1/hls/test' type='rtmp/flv'/> rtmp格式
  39. <source src='http://127.0.0.1/hls/test.m3u8' type='application/x-mpegURL'/>  m3u8格式
  40. <source src='http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8' type='application/x-mpegURL'/> m3u8格式，可用
  41. -->
  42. <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>
  43. </video>
  44. <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    -->
  45. <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址-->
  46. </div>
  47. </div>
  48. <!-- timeline plugin container -->
  49. </div>
  50. </div>
  51. <div class="clear"></div>
  52. <div id="information_wrapper">
  53. <!-- description plugin container -->
  54. <div id="engage_description"><!-- theodul description plugin desktop mode -->
  55. <div id="engage_basic_description"></div>
  56. </div>
  57. </div>
  58. <div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->
  59. </div>
  60. <script src="videojs/videojs-media-sources.min.js"></script>
  61. <!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->
  62. <script src="videojs/videojs.hls.min.js"></script>
  63. <script>
  64. //播放的话，就直接使用下面2行
  65. //后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好
  66. var player = videojs('my-video');
  67. player.play();
  68. /*
  69. (function ($) {
  70. var resetVideoSize = function (myPlayer) {
  71. var videoJsBoxWidth = $(".video-js").width();
  72. var ratio = 1440 / 900;
  73. var videoJsBoxHeight = videoJsBoxWidth / ratio;
  74. myPlayer.height(videoJsBoxHeight);
  75. }
  76. $(window).on("resize", function () {
  77. resetVideoSize(myPlayer);
  78. });
  79. myPlayer.play();
  80. })(jQuery)
  81. function changeSrc() {
  82. var src = "http://127.0.0.1/hls/test.m3u8";
  83. var myPlayera = videojs("my-video");
  84. $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
  85. myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址
  86. myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载
  87. }
  88. */
  89. function changeSrc(src) {
  90. var myPlayera = videojs("my-video");
  91. //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
  92. myPlayera.src(src); //重新初始化视频地址
  93. myPlayera.load(src); //重新加载
  94. }
  95. </script>
  96. </body>
  97. </html>

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

  1. EasyDSS RTMP流媒体服务器videojs flash播放RTMP/HLS提示错误的解决方案

    本文转自EasyDSS团队成员StarIT的博客:http://blog.csdn.net/staritstarit/article/details/73692715 问题 在博客<EasyDS ...

  2. 流媒体基础实践之——RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)

    user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...

  3. 前端页面播放 rtmp 流与 flv 格式视频文件

    技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放 使用到 插件 : videojs + ckplayer 遇到的 ...

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

    user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...

  5. 浏览器播放rtmp流

    我是利用flash插件实现的,需要以下几个文件: flowplayer-3.2.8.min.js flowplayer-3.2.18.swf flowplayer.rtmp-3.2.8.swf flo ...

  6. EasyDSS RTMP流媒体服务器中调用videojs播放rtmp视频显示在左上角问题

    本文转自EasyDarwin团队成员Penggy的博客:http://www.jianshu.com/p/f63f5b7c691b 问题描述: 近期我开发了一款新一代的RTMP/HLS流媒体服务器软件 ...

  7. Android 如何直播RTMP流

    在android上,视频/音频流直播是极少有人关注的一部分.每当我们讨论流媒体,RTMP(Real Time Messaging Protocol)是不可或缺的.RTMP是一个基本的视频/音频直播流协 ...

  8. 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

    前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...

  9. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

随机推荐

  1. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  2. [JavaScript]对象创建方法

    1.使用Object或对象字面量创建对象 (1)使用Object创建对象 var cat= new Object(); cat.name = "Tom"; cat.color= & ...

  3. Neutron的防火墙原理

    确切的说这是fwaas,即防火墙即是服务. 防火墙与安全组区别防火墙一般放在网关上,用来隔离子网之间的访问.因此,防火墙即服务也是在网络节点上(具体说来是在路由器命名空间中)来实现. 安全组的对象是虚 ...

  4. DOS命令说明

    (转自:http://blog.csdn.net/mydriverc/article/details/2047152) 1 errorlevel dir cd md rd del ren cls ty ...

  5. 在VMware永久修改网

    如果想要永久性设置固定的IP地址,需要通过编辑网卡配置文件实现: 现在使用VI编辑器打开配置文件. # vi /etc/sysconfig/network-scripts/ifcfg-eth0 虽然直 ...

  6. fastjson缺陷--map转换json时出现$ref的情况

    DisableCircularReferenceDetect来禁止循环引用检测: JSON.toJSONString(..., SerializerFeature.DisableCircularRef ...

  7. Qt中内存泄露和退出崩溃的问题

    http://blog.csdn.net/wangkuiyun/article/details/7412379

  8. Build ios app with Delphi Xe4. Lazy Social Talker ready for sale.

    Yes, it is build with Delphi XE4. try it. now. What is  Lazy Social  Talker? Lazy Social Talker is a ...

  9. 随机获取图片的api接口

    http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...

  10. [HAL]5.中断里调用HAL_Delay()进入死循环的原因

    中断里调用HAL_Delay()进入死循环的原因  摘自:http://blog.csdn.net/alwxkxk/article/details/47204677 CUBE生成的程序中, SysTi ...