基于video.js的rtmp直播流播放

作者: 豆豆猫1031 | 来源:发表于2018-02-23 18:02 被阅读0次

1.简单版（小心cdn失效）
<!DOCTYPE html>
<html lang="en">
<head>

<title>Video.js | HTML5 Video Player</title>
<!-- <link href="video-js-6.2.0/video-js.css" rel="stylesheet">
<script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->

<link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>

</head>
<body>

<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>

</video>

</html>

2.复杂版
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video.js | HTML5 Video Player</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="video-js-6.2.0/videojs-ie8.min.js"></script> -->
<link href="video-js-5.20.1/video-js.css" rel="stylesheet">
<script src="video-js-5.20.1/ie8/videojs-ie8.min.js"></script>
</head>
<body style="margin:0px;">

<video id="yxm_video" class="video-js vjs-default-skin vjs-big-play-centered" >
    <p class="vjs-no-js">您的浏览器不支持H5或FLASH</p>
</video>
<script src="video-js-5.20.1/video.vod.js"></script>

<script>
    
    var player = videojs('yxm_video',{
        //width: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['width']) ){ echo $_GET['width'];} else {echo 1280;} ?>,
        //height: <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['height']) ){ echo $_GET['height'];} else {echo 720;} ?>,
        width:980,
        height:550,
        controls:true,
        preload:"true",    //预加载：string；'auto'|'true'|'metadata'|'none'
        //poster:'source/suoluetu.jpg',//预览图：string
        autoplay:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['auto'])){ echo 'true';} else {echo 'false';} ?>,
        loop:<?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['loop'])){ echo 'true';} else {echo 'false';} ?>,
        muted:false, //静音
        sources:[
            {
                //src:'source/test.mp4',
                //type:'video/mp4'
                //src:'rtmp://192.168.2.24:1935/live/720yzc.stream',
                <?php 
                    if(is_array($_GET) && count($_GET)>0 && isset($_GET["rtmp"])){
                ?>
                    src:'<?php echo urldecode($_GET["rtmp"]); ?>',
                    
                <?php
                    } else {
                ?>
                    // 默认地址
                    src:'',
                <?php
                    }
                ?>
                    // 默认视频类型
                    type:'rtmp/flv'
            },
            {
                <?php 
                    if(is_array($_GET) && count($_GET)>0 && isset($_GET["hls"])){
                ?>
                    src:'<?php echo urldecode($_GET["hls"]); ?>',
                    
                <?php
                    } else {
                ?>
                    // 默认地址
                    src:'',
                <?php
                    }
                ?>
                    // 默认视频类型
                    type:'application/x-mpegURL'
            }
        ],
        controlBar: {
            muteToggle: false, //静音按钮
            volumeMenuButton: false, // 音量调节
            <?php if(is_array($_GET) && count($_GET)>0 && isset($_GET['live'])){ echo 'progressControl: false';} ?>
            
        }
    },function onPlayerReady(){
        
    });        

</script>

</body>
</html>

3.百度的accesskey收钱版
http://cyberplayer.bcelive.com/demo/new/index.html

网友评论

本文标题：基于video.js的rtmp直播流播放

本文链接：https://www.haomeiwen.com/subject/xxnxxftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

基于video.js的rtmp直播流播放

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读