在視頻標籤上放置按鈕

問題是在全屏模式下查看時，按鈕在視頻播放器上不再可見。如何以全屏/正常屏幕模式顯示視頻播放器上的按鈕？在視頻標籤上放置按鈕

$('#btnFullscreen').on('click', function() { 
 
    var elem = document.getElementById("hwyVideo"); 
 
    if (elem.requestFullscreen) { 
 
     elem.requestFullscreen(); 
 
    } else if (elem.msRequestFullscreen) { 
 
     elem.msRequestFullscreen(); 
 
    } else if (elem.mozRequestFullScreen) { 
 
     elem.mozRequestFullScreen(); 
 
    } else if (elem.webkitRequestFullscreen) { 
 
     elem.webkitRequestFullscreen(); 
 
    } 
 
});

.videoContainer { 
 
    position: relative; 
 
} 
 
.videoContainer > .btnCamera { 
 
    background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat; 
 
    height: 128px; 
 
    left: 22%; 
 
    margin: -64px 0 0 -64px; 
 
    position: fixed; 
 
    top: 20%; 
 
    width: 128px; 
 
    z-index: 1; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="videoContainer"> 
 
    <video id="hwyVideo" controls="controls" style="width: 42%; height: auto"> 
 
    <source src="http://www.youtube.com/embed/XGSy3_Czz8k"> 
 
     <p>Your browser does not support the video tag.</p> 
 
    </video> 
 
    <div id="btnCamera" class="btnCamera"></div> 
 

 
</div> 
 

 
<input type="submit" id="btnFullscreen" data-role="none" name="btnPopupAddneModelOP" data-icon="check" value="Fullscreen" />

來源

2015-04-30 Girish Kumar

請不要使用塊引用格式不必要突出你的問題。標題中不需要技術（或庫）名稱，因爲它們已經是標籤的一部分。最後，你的意思是*全屏/正常屏幕模式*或*全屏幕和正常屏幕模式*？ – Harry

你應該叫requestFullscreen視頻容器元素，所以比如你可以改變

var elem = document.getElementById("hwyVideo");

到

var elem = document.getElementById("hwyVideo").parentNode;

來源

2015-04-30 12:31:43 Marek

在視頻標籤上放置按鈕

回答

相關問題