123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title></title>
- <link href="css/mui.min.css" rel="stylesheet" />
- <link href="css/main.css" rel="stylesheet" />
- <link href="css/mediaelementplayer.css" rel="stylesheet" />
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- <h1 class="mui-title" id="title">温室</h1>
- </header>
- <div class="mui-content">
- <div class="mui-control-content mui-active">
- <div id="player" style="display: none; width: 7.5rem;height: 4.2187rem;">
- <video preload="metadata" width="100%" height="10" webkit-playsinline controls="controls">
- </video>
- </div>
- <iframe id="product" src="" style="width:100%;overflow: hidden;border:0px;"></iframe>
- </div>
- </div>
- <script src="js/mui.min.js"></script>
- <script src="js/main.js"></script>
- <script src="js/jquery-1.8.3.min.js"></script>
- <script src="js/mediaelement-and-player.js"></script>
- <script type="text/javascript" charset="utf-8">
- (function($, self) {
- $.init();
- $.plusReady(function() {
- plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
- var self = plus.webview.currentWebview();
- var id = self.vid;
- var name = self.name;
- document.getElementById('title').innerText = name;
- var page = document.getElementById("product");
- //alert(winSize().height);
- page.setAttribute('height', winSize().height);
- //alert(page.getAttribute('height'));
- page.setAttribute('src', config.host + 'product?&header=false&id='+id);
- window.addEventListener('resize', function() {
- oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
- }, false);
- //"http://pili-media.live.ol-img.com/recordings/z1.beauty_live.OL_20160708144523_383le/383.m3u8";
- var m3u8Url = self.live_url;
- if(m3u8Url.indexOf(".m3u8")==-1){
- return;
- }
- //允许内联播放
- plus.webview.currentWebview().nativeInstanceObject().plusSetAttribute("allowsInlineMediaPlayback", true);
- //plus.webview.currentWebview().nativeInstanceObject().plusSetAttribute("mediaPlaybackRequiresUserAction", false);
- (function ($) {
- var qiniuvu = m3u8Url;
- var poster = "";//视频封面图
- var height = plus.screen.resolutionWidth*4.2187/7.5;
- $("#product").css('margin-top',height-66);
- $("video").width(plus.screen.resolutionWidth).height(height);
- $("video").attr("src", m3u8Url);
- $("video").attr("poster", poster);
- var videoExt = qiniuvu.substring(qiniuvu.lastIndexOf('.') + 1).toLowerCase();
- if (videoExt == "m3u8") {// 手动支持m3u8格式
- $("video").attr("type", "video/m3u8");
- }
- var ele_player = document.getElementById("player");
- ele_player.style.display = "block";
- $("video").mediaelementplayer({
- pluginPath: './'
- , success: function(media, node, player) {
- letvPlayer = media;
- // 开始播放
- // media.play();
- if (plus.os.name == "Android") {
- player.fullscreenBtn.on("tap", function () {
- if (!player.isFullScreen) {
- // 进全屏
- //plus.pgpassport.changeStatusBarOrientation('landscape-primary');
- $("footer").hide();
- } else {
- // 退出全屏
- //plus.pgpassport.changeStatusBarOrientation('portrait-primary');
- setTimeout(function () {
- $("footer").show();
- }, 1000);
- }
- });
- } else {
- $("video")[0].addEventListener('webkitbeginfullscreen', function () {
- // 进全屏
- //plus.pgpassport.changeStatusBarOrientation('landscape-primary');
- }, false);
- $("video")[0].addEventListener('webkitendfullscreen', function () {
- // 退出全屏
- //plus.pgpassport.changeStatusBarOrientation('portrait-primary');
- }, false);
- }
- }
- });
- })(jQuery);
- });
- }(mui, document));
- </script>
- </body>
- </html>
|