之前说到已经把流推送过来了，这时候就可以使用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. C语言，C#，Java，JavaScript之强类型与弱类型

    奇葩的我今天想到一个坑爹的问题,都说Java是强类型的语言,JavaScript是弱类型的语言. 嗯嗯,那初学时候的C语言呢? 呵呵哒,突然觉得短路了.说Java是强类型的语言是因为遇到这样的情况: ...

  2. webstorm打开带有node_modules文件夹的工程时很卡

    ctrl+alt+s打开settings 在webstorm中配置这个就可以不加载出来node_modules使页面加载快

  3. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  4. HDU 4725 建图

    http://acm.hdu.edu.cn/showproblem.php?pid=4725 The Shortest Path in Nya Graph Time Limit: 2000/1000 ...

  5. 一些开源搜索引擎实现——倒排使用原始文件，列存储Hbase，KV store如levelDB、mongoDB、redis，以及SQL的，如sqlite或者xxSQL

    本文说明:除开ES,Solr,sphinx系列的其他开源搜索引擎汇总于此.   A search engine based on Node.js and LevelDB A persistent, n ...

  6. [转载]SVN trunk、branch、tag的用法

    Subversion有一个很标准的目录结构,是这样的. 比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/|+-trunk+-branches+-t ...

  7. 2017.11.18 IAP下载（STM8，PIC，STM32）

    客户要求用IAP下载,mark一下,客户还给了stm32的引导码.仅供参考. 1 PIC单片机的IAP  2 STm32 IAP https://www.cnblogs.com/WeyneChen/p ...

  8. C++复制构造函数的实现

    复制构造函数是一种特殊的构造函数,有一般构造函数的特性.它的功能是用一个已知的对象来初始化一个被创建的同类对象.复制构造函数的参数传递方式必须按引用来进行传递,请看实例: #include <i ...

  9. 使用 DocFX 生成 .Net/Unity项目文档

    孙广东  2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX   类似JSDoc或Sphinx     如何使用看 : http: ...

  10. 如何限制mongodb数据库内存占用量方法

    多实例下: 可以通过绑定cpu,来防止多实例相互干扰. mongodb的内存也可以限制主,防止全部内存都被一个实例占据. ulimit -s 4096 && ulimit -m 314 ...