Chrome播放rtsp无flash方式

    科技2025-11-11  15

    接上篇博客 Chrome播放rtsp_支持H.265实现了rtsp转rtmp,播放通过flash插件

    此文通过rtsp转hls,实现无flash,播放rtsp直播流

     

    1、安装ffmpeg

    可参考前文,有安装包

    2、运行命令

    rtsp编码格式H.264

    ffmpeg -rtsp_transport tcp -i "rtsp://XXXXX" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -y C:/Users/admin/Desktop/nginx-1.2.9/html/test.m3u8

    rtsp编码格式H.265

    ffmpeg -rtsp_transport tcp -i "rtsp://XXXXX" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec h264 -y C:/Users/admin/Desktop/nginx-1.2.9/html/test2.m3u8

    别小看只有一个参数差别,性能天差地别,copy不转码,占用5M左右,H.265需要转码占用500M

    3、页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html5播放 m3u8示例</title> <script type="text/javascript" src="chplayer.js?1333"></script> </head> <body> <div id="video" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> var videoObject = { autoplay: false, //是否自动播放,默认true=自动播放,false=默认暂停状态 poster: 'http://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg', //封面图片地址 container: '#video',//“#”代表容器的ID,“.”或“”代表容器的class variable: 'player',//该属性必需设置,值等于下面的new chplayer()的对象 video: 'http://localhost/test2.m3u8',//视频地址 volume: 0.6, //默认音量 front: '', //前一集按钮点击触发函数,即点击前一集时调用的函数名称,默认为空 next: '', //下一集按钮点击触发函数,即点击下一集时调用的函数名称,默认为空 html5m3u8: true//hls为true //loop: true //是否循环播放 }; var player = new chplayer(videoObject); </script> </body> </html>

    4、效果

    延迟差不多20秒(猜想2个TS文件缓存的)

    Processed: 0.014, SQL: 9