服务器（公网推rtmp流），网页本地（qq浏览器）播放rtmp流，且可切换rtmp流播放。使用了video.js、videojs-flash.js、jquery-3.4.1.js和我自己写的一个js

问题：最开始我想在下拉列表的值发生变化时将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>

jsp文件和js、css的路径

根据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();

服务器（公网推rtmp流），网页本地（qq浏览器）播放rtmp流，且可切换rtmp流播放。使用了video.js、videojs-flash.js、jquery-3.4.1.js和我自己写的一个js

猜你喜欢