问题： 最开始我想在下拉列表的值发生变化时将video标签包含的source标签里面的src中的rtmp流直接替换掉，达到切换rtmp源播放的目的，但是一直无法生效，最后我想每个源直接做一个html页面，发现如果有几百个源就需要做很多，因此直接采用servlet画html，每次请求servlet时拼接好rtmp流，然后再生成页面，就能达到切换rtmp源播放的效果；谷歌浏览器和火狐不支持flash，播放不了rtmp流。最后选择我常用的QQ浏览器成功了。
新问题：测试一个一个的小视频（4s左右时，rtmp推流后，浏览器并不是一定能收到，还不知道如何解决）
- 根据拥有的可查看的rtmp流，设计一个下拉列表供选择哪一个rtmp流进行观看。
下拉列表,使用ajax后端访问可查看的rtmp流动态生成选项。
<!--引入css--><link href="lib/css/video-js.css" rel="stylesheet"><!--引入js--><script src="lib/js/video.js"></script><script src="lib/js/videojs-flash.js"></script><script src="lib/js/jquery-3.4.1.js" type="text/javascript"></script><script src="lib/js/myVideo.js" type="text/javascript"></script>请选择观看的设备<select id="devId" style="width: 150px"></select>
- 根据1选择的值用post方法直接提交到后端servlet，然后返回播放页面和返回主页面。
$(function() {let devId=$("#devId");//下拉列表iddevId.on("change",function () {//post请求转播放页面postRequest(devId.val());})function postRequest(param) {//写一个隐藏表单post提交document.write("<form action='video' method='post' name='myform' style='display:none'>");document.write("<input type='hidden' name='devid' value='"+param+"'/>");document.write("</form>");document.myform.submit();}
- 最后servlet跳转播放页面，播放成功。
response.setContentType("text/html;charset=UTF-8");//设置成返回html页面response.setCharacterEncoding("utf-8");PrintWriter writer = response.getWriter();String devid=request.getParameter("devid");System.out.println("本次设备"+devid+"请求播放");writer.print("<html>\n" +" <head>\n" +" <title>设备视频</title>\n" +" <link href=\"lib/css/video-js.css\" rel=\"stylesheet\">\n" +" <!--引入播放器js-->\n" +" <script src=\"lib/js/video.js\"></script>\n" +" <script src=\"lib/js/videojs-flash.js\"></script>\n" +" <script src=\"lib/js/jquery-3.4.1.js\" type=\"text/javascript\"></script>\n" +" <script type=\"text/javascript\">\n" +" // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器\n" +" videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';\n" +" let player=videojs(\"my-player\"); //my-player为页面video元素的id\n" +" player.play(); //播放\n" +" </script>" +" </head>\n" +" <body>\n" +" <a href=\"video.jsp\" style=\"width: 150px\">重新选择观看的设备</a>"+" <video id=\"my-player\" class=\"video-js vjs-default-skin vjs-big-play-centered\" preload=\"auto\" autoplay=\"autoplay\"\n" +" data-setup='{}' style=\"position: absolute;margin-left: 0;margin-top: 0;width: 100%;height: 100%\">\n" +" <!--src: 规定媒体文件的 URL type:规定媒体资源的类型-->\n" +" <source id=\"rtmp\" src=\"rtmp://39.105.13.243:18890/live/"+devid+"\" type=\"rtmp/flv\"/>\n" +" </video>\n" +" </body>\n" +"</html>");writer.flush();writer.close();
