点击视频播放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

回答

相关问题