问题： 最开始我想在下拉列表的值发生变化时将video标签包含的source标签里面的src中的rtmp流直接替换掉，达到切换rtmp源播放的目的，但是一直无法生效，最后我想每个源直接做一个html页面，发现如果有几百个源就需要做很多，因此直接采用servlet画html，每次请求servlet时拼接好rtmp流，然后再生成页面，就能达到切换rtmp源播放的效果；谷歌浏览器和火狐不支持flash，播放不了rtmp流。最后选择我常用的QQ浏览器成功了
- 根据拥有的可查看的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");//下拉列表id
devId.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();
![IDEA+Java+Servlet+JSP+Mysql实现Web图书管理系统【建议收藏】一、系统介绍二、系统展示 三、部分代码四、其他[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)