<!DOCTYPE html> <html> <head> <title>SRS</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/srs.page.js"></script> <script type="text/javascript" src="js/srs.log.js"></script> <script type="text/javascript" src="js/srs.player.js"></script> <script type="text/javascript" src="js/srs.publisher.js"></script> <script type="text/javascript" src="js/srs.utility.js"></script> <style> body{ padding-top: 55px; } #main_modal { width: 700px; margin-left: -350px; } </style> <script type="text/javascript" src="js/jwplayer.js" ></script> <script type='text/javascript'>jwplayer.key = 'N8zhkmYvvRwOhz4aTGkySoEri4x+9pQwR7GHIQ=='; </script> <script type="text/javascript"> var _player = null; var _url = null; $(function(){ // get the vhost and port to set the default url. // for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo // url set to: rtmp://demo:1935/live/livestream srs_init("#txt_rtmp_url", "#txt_hls_url", "#main_modal"); $("#main_modal").on("hide", function(){ $("#div_container").remove(); _player.stop(); }); $("#main_modal").on("show", function(){ $("#div_container").remove(); var div_container = $("<div/>"); $(div_container).attr("id", "div_container"); $("#player").append(div_container); var player = $("<div/>"); $(player).attr("id", "player_id"); $(div_container).append(player); var conf = { file: _url, width: srs_get_player_width(), height: srs_get_player_height(), autostart: true, analytics: { enabled: false} }; _player = jwplayer('player_id').setup(conf); }); $("#btn_play_rtmp").click(function(){ _url = $("#txt_rtmp_url").val(); $("#main_modal").modal({show:true, keyboard:false}); }); $("#btn_play_hls").click(function(){ _url = $("#txt_hls_url").val(); $("#main_modal").modal({show:true, keyboard:false}); }); var query = parse_query_string(); if (query.hls_autostart == "true") { _url = $("#txt_hls_url").val(); $("#main_modal").modal({show:true, keyboard:false}); } else if (query.rtmp_autostart == "true") { _url = $("#txt_rtmp_url").val(); $("#main_modal").modal({show:true, keyboard:false}); } }); </script> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a id="srs_index" class="brand" href="#">SRS</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li> <li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li> <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li> <li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li> <li class="active"><a id="nav_jwplayer6" href="jwplayer6.html">JWPlayer6播放器</a></li> <li><a id="nav_osmf" href="osmf.html">AdobeOSMF播放器</a></li> <li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div class="alert alert-info fade in"> <button type="button" class="close" data-dismiss="alert">×</button> <strong><span>Usage:</span></strong> <span>输入地址后点击播放按钮</span> </div> <div class="form-inline"> URL: <input type="text" id="txt_rtmp_url" class="input-xxlarge" value=""></input> <button class="btn btn-primary" id="btn_play_rtmp">播放RTMP</button> </div> <hr/> <div class="form-inline"> URL: <input type="text" id="txt_hls_url" class="input-xxlarge" value=""></input> <button class="btn btn-primary" id="btn_play_hls"> 播放HLS </button> </div> <div id="main_modal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>JWPlayer6</h3> </div> <div class="modal-body" id="player"> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"> 关闭 </button> </div> </div> <hr> <footer> <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team © 2013</a></p> </footer> </div> </body>