video.js播放rtmp流

最新推荐文章于 2025-03-06 10:32:12 发布

头发只会阻止我变强

最新推荐文章于 2025-03-06 10:32:12 发布

阅读量3.1k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_32727953/article/details/109694606

版权

前端专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <!--引入播放器样式-->
    <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
    <!--引入播放器js-->
    <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>


<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" autoplay="autoplay"
       poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
    <!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
    <source src='rtmp://202.69.69.180:443/webcast/bshdlive-pc' id="source_url" type='rtmp/flv'/>
</video>
<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
    //my-player为页面video元素的id
    var player = videojs('my-player',{techOrder: ['flash', 'html5']});  //使用播放技术,不用h5可以强制使用flash
    player.ready(function(){    //暂停后无法继续播放，刷新视频，没这个需求可以无视(感觉效果不是理想)
        var myPlayer = this;
        myPlayer.on("pause",function(){
            myPlayer.on( "play",function(){
                myPlayer.load();
                myPlayer.off("play");
            });
        });
    });
</script>
</body>
</html>

刚好遇到一个拉流的需求，然后顺便学习记录一下，下面的暂停重新播放虽然可以实现，但是每次载入会闪一下，由于没有具体需求就没有深究了，有兴趣的朋友可以看看还有没有其他更好的方案。
在这里插入图片描述