問題： 最開始我想在下拉清單的值發生變化時将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=)