videojs集成--播放rtmp流

最新推荐文章于 2024-06-28 15:16:01 发布

置顶金刀李

最新推荐文章于 2024-06-28 15:16:01 发布

阅读量5.3w

点赞数 5

分类专栏：直播相关 videojs 文章标签： rtmp videojs

本文链接：https://blog.csdn.net/cmqwan/article/details/60885111

版权

直播相关同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

videojs

2 篇文章 0 订阅

订阅专栏

要是播不了的话，可以看下这篇文章。http://blog.csdn.net/cmqwan/article/details/76059703

之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。

首先要先有一个文件，那就是video-js.swf

因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。

代码就是下面这样。

里面一些细节注释都有。

重点就是看<video>标签里面的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="description" content="Opencast Media Player">
    <meta name="author" content="Opencast">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>RTMP播放</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/core_global_style.css">
    <script src="videojs/jquery.js"></script>
    <script src="videojs/video.js"></script>
    <link href="videojs/video-js.css" rel="stylesheet">
    <script>
        videojs.options.flash.swf = "videojs/video-js.swf";//flash路径，有一些html播放不了的视频，就需要用到flash播放。这一句话要加在在videojs.js引入之后使用
    </script>
</head>
<body >
<div id="engage_view" style="display: block;">
    <div id="engage_content">
        <div id="engage_resize_container">

            <div id="engage_video">
                <!-- theodul video videojs plugin desktop mode  controls preload="auto"
						vjs-big-play-centered 播放按钮居中
						poster默认的显示界面，就是还没点播放，给你显示的界面
						controls
						preload="auto" 是否提前加载
						autoplay 自动播放
						loop=true 自动循环
						data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}
				-->
                <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
                       poster="videojs/eguidlogo.png" width="800" height="600"
                >
                    <!--
						<source src="../output.mp4" type='video/mp4'>  mp4格式
						<source src='rtmp://127.0.0.1/hls/test' type='rtmp/flv'/> rtmp格式
						<source src='http://127.0.0.1/hls/test.m3u8' type='application/x-mpegURL'/>  m3u8格式
						<source src='http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8' type='application/x-mpegURL'/> m3u8格式，可用
					-->
                    <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>
                </video>

                <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    -->
                <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址-->
            </div>
        </div>
        <!-- timeline plugin container -->
    </div>
</div>
<div class="clear"></div>
<div id="information_wrapper">
    <!-- description plugin container -->
    <div id="engage_description"><!-- theodul description plugin desktop mode -->

        <div id="engage_basic_description"></div>

    </div>
</div>
<div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->
</div>

<script src="videojs/videojs-media-sources.min.js"></script>
<!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->
<script src="videojs/videojs.hls.min.js"></script>
<script>

	//播放的话，就直接使用下面2行
	//后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好
    var player = videojs('my-video');
    player.play();
    /*
    (function ($) {

        var resetVideoSize = function (myPlayer) {
            var videoJsBoxWidth = $(".video-js").width();
            var ratio = 1440 / 900;
            var videoJsBoxHeight = videoJsBoxWidth / ratio;
            myPlayer.height(videoJsBoxHeight);
        }

        $(window).on("resize", function () {
            resetVideoSize(myPlayer);
        });
        myPlayer.play();
    })(jQuery)

    function changeSrc() {
        var src = "http://127.0.0.1/hls/test.m3u8";
        var myPlayera = videojs("my-video");
        $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
        myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址
        myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载
    }
    */
    function changeSrc(src) {

        var myPlayera = videojs("my-video");
        //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")
        myPlayera.src(src); //重新初始化视频地址
        myPlayera.load(src); //重新加载
    }
</script>

</body>
</html>

2019年1月22日更新

将直播从推送到播放的所有流程整理了一份最完整的流程，希望大家多多支持

直播/点播系统快速搭建指南

https://gitbook.cn/gitchat/activity/5c459895e1f3a5423d1c3a6c

金刀李

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
14
评论
videojs集成--播放rtmp流

要是播不了的话，可以看下这篇文章。http://blog.csdn.net/cmqwan/article/details/76059703 之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。首先要先有一个文件，那就是video-js.swf因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。...
复制链接

扫一扫

专栏目录