Question

嗨，有人想知道是否可以点击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>

Answer 1

在视频中注册点击事件：

myVideo.addEventListener('click', playPause);

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

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

Answer 3

这可以通过简单的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>

点击视频播放HTML5 / CSS3

3 个答案: