Javascript Html5视频-在屏幕上播放/暂停视频单击
嗨Javascript Html5视频-在屏幕上播放/暂停视频单击,javascript,jquery,html,video,screen,Javascript,Jquery,Html,Video,Screen,嗨 播放/暂停 大的 小的 正常的 您的浏览器不支持HTML5视频。 var myVideo=document.getElementById(“video1”); 函数playPause() { 如果(myVideo.paused) myVideo.play(); 其他的 myVideo.pause(); } 函数makeBig() { myVideo.width=560; } 函数makeSmall() { myVideo.width=320; } 函数makeNormal()
播放/暂停
大的
小的
正常的
您的浏览器不支持HTML5视频。
var myVideo=document.getElementById(“video1”);
函数playPause()
{
如果(myVideo.paused)
myVideo.play();
其他的
myVideo.pause();
}
函数makeBig()
{
myVideo.width=560;
}
函数makeSmall()
{
myVideo.width=320;
}
函数makeNormal()
{
myVideo.width=420;
}
视频由您提供
我尝试使用html5视频从下面的网站
如何在视频屏幕上播放/暂停视频单击
任何帮助都将不胜感激
谢谢。只需单击即可调用功能视频
<!DOCTYPE html>
<html>
<body>
<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="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.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=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
...
最短路径
onclick=“this[this.paused'play':'pause']()”
正确(但仍然很短)的道路
…考虑到您的视频已经在变量中,您通常应该使用事件侦听器,而不是硬编码的onX属性…
(即使您有回调!)
PS:如果你想知道黑客是如何进行播放/暂停的,那是基于这样一个事实:在JavaScript中,方法/对象函数基本上是该对象的可调用属性,而且在JavaScript中,你可以直接引用属性
someObj.someProperty
,也可以通过值或变量,比如someObj[“someProperty”]
,var prop=“someProperty”;someObj[prop];
…所以一个相当于一艘班轮的长的
var myVideo = document.getElementById("video1");
myVideo.addEventListener('click', function(e){
e.preventDefault();
this[this.paused ? 'play' : 'pause']();
});
解决了可能重复的问题,最好调用视频对象本身,否则单击任何其他元素将停止视频。
var myVideo = document.getElementById("video1");
myVideo.addEventListener('click', function(e){
e.preventDefault();
this[this.paused ? 'play' : 'pause']();
});
if (this.paused) {
this.play();
} else {
this.pause();
}