制作相同的按钮播放/暂停html5视频

所以我有一点工作，最终我打破了它，现在我需要得到它再次工作。制作相同的按钮播放/暂停html5视频

我想要当你按下播放按钮的视频将开始播放。并且PLAY按钮会将其文字改为PAUSE。然后当你再次点击时，视频会暂停。

HTML：

<video id="myVideo" width="1024" height="576"> 
    <source src="myaddiction.mp4" type="video/mp4"> 
    <source src="myaddiction.mp4.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video> 

<button id="button" onclick="playPause(); ">PLAY</button>

SCRIPT：

var vid = document.getElementById("myVideo"); 

function playPause() { 
    vid.play(); 
} 

function playPause() { 
    vid.pause(); 
} 




function playPause() { 
    var change = document.getElementById("button"); 
    if (change.innerHTML == "PLAY") { 
    change.innerHTML = "PAUSE"; 
    } else { 
    change.innerHTML = "PLAY"; 
    } 
}

这里也是与它的一切小提琴。如果你知道如何制作一个视频，那么如果你添加它，这将会很酷。谢谢！

https://jsfiddle.net/wb83hydn/

**编辑：目前的问题是，当按下按钮时，视频播放习惯。该按钮改变文字，但视频不做任何事。

来源

2017-03-09 Warren Breedlove

你第一个问题是，你必须使用相同的名称3种功能。 – earl3s

您正在定义您的playPause函数3个不同的时间。你很可能会得到一些意想不到的结果。也就是说，如果口译员没有完全出错。只需创建一个函数就可以更好地服务，并使用全局变量来处理播放/暂停状态的跟踪。这样的事情：

var vid = document.getElementById("myVideo"); 
var isPlaying = false; 

function playPause() { 
    var change = document.getElementById("button"); 
    if (isPlaying) { 
    vid.pause(); 
    change.innerHTML = "PLAY"; 
    } else { 
    vid.play(); 
    change.innerHTML = "PAUSE"; 
    } 
    isPlaying = !isPlaying; 
}

来源

2017-03-09 19:26:08

改变你的javascript来使它工作。您需要确保首先使用window.onLoad加载DOM，或者将JS放在HTML文件的末尾。

我更新了JSFiddle，但您需要一个有效的在线视频文件才能使其工作。

var vid = document.getElementById("myVideo"); 

function play() { 
    vid.play(); 
} 

function pause() { 
    vid.pause(); 
} 

function playPause() { 
    var change = document.getElementById("button"); 
    if (change.innerHTML == "PLAY") { 
    change.innerHTML = "PAUSE"; 
    play(); 
    } else { 
    change.innerHTML = "PLAY"; 
    pause(); 
    } 
}

https://jsfiddle.net/wb83hydn/3/

来源

2017-03-09 19:30:04 earl3s

制作相同的按钮播放/暂停html5视频

回答

相关问题