点击视频播放 HTML5/CSS3答案

【问题标题】：Clicking on video to play it HTML5/CSS3点击视频播放 HTML5/CSS3
【发布时间】：2014-09-01 10:58:35
【问题描述】：

大家好，只是想知道是否可以单击 HTML5 格式的视频进行播放？

我的意思是，在视频上不是一个单独的按钮来停止和播放视频，就像在你的管上一样。

干杯

这是我的代码..

<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>

【问题讨论】：

标签： html css

【解决方案1】：

在视频上注册点击事件：

myVideo.addEventListener('click', playPause);

在这种情况下，每次点击都会调用playPause()函数。

【讨论】：

我试过这个函数 myVideo.addEventListener('click', playPause);但似乎没有用:(
按照此处的说明进行操作：stackoverflow.com/questions/5278262/…
检查控制台。也许你的代码有错误。
如果可以的话，为dreamlab awnser添加+1 ^^

【解决方案2】：

此链接可能有用

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>

【讨论】：

【解决方案3】：

这可以在没有 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>

【讨论】：