點擊視頻播放HTML5/CSS3

嗨，那裏的傢伙只是想知道是否可以點擊HTML5中的視頻進行播放？點擊視頻播放HTML5/CSS3

我的意思是，在視頻上不是一個單獨的按鈕來停止和播放視頻，就像在你的電子管上。

乾杯

這裏是我的代碼..

<div style="text-align:center"> 
    <button onclick="playPause()">Play/Pause</button> 
    <button onclick="makeBig()">Big</button> 
    <button onclick="makeSmall()">Small</button> 
    <button onclick="makeNormal()">Normal</button> 
    <br> 
    <video id="video1" width="1250"> 
    <source src="pjds.mp4" type="video/mp4"> 
    <source src="pjds.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) 
     myVideo.play(); 
    else 
     myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 1250; 
} 

function makeSmall() { 
    myVideo.width = 420; 
} 

function makeNormal() { 
    myVideo.width = 560; 
} 
</script>

來源

2014-09-01 Samantha

上的視頻註冊的單擊事件：

myVideo.addEventListener('click', playPause);

在這種情況下

，每一次點擊將調用playPause()功能。

來源

2014-09-01 11:05:29 dreamlab

實現我嘗試這個功能myVideo.addEventListener （'C舔'，playPause）;但似乎沒有工作:( – Samantha 2014-09-01 11:07:41

按照說明在這裏：http://stackoverflow.com/questions/5278262/click-the-poster-image-the-html5-video-plays – jmercier 2014-09-01 11:08:28

檢查控制檯。也許你有一個錯誤代碼 – dreamlab 2014-09-01 11:14:01

此鏈接可能是有用的

simple video player

HTML

<div class="mediaplayer"> 
     <video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none"> 
      <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" /> 
      <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" /> 
     </video> 
</div>

來源

2014-09-01 11:08:01 Hamix

這可以在不JavaScript的只是簡單的HTML5

<html> 
<body> 

<div style="text-align:center"> 
    <video id="video1" width="420" controls> 
    <source src="pjds.mp4" type="video/mp4"> 
    <source src="pjds.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 
</body> 
</html>

來源

2014-09-01 11:09:00 user3811714

點擊視頻播放HTML5/CSS3

回答

相關問題