YouTube 视频的播放/暂停按钮 [英] Play/Pause button for a youtube video
本文介绍了YouTube 视频的播放/暂停按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一个控制我的 youtube 视频的播放/暂停切换按钮.
<a id="play-button">播放/暂停</a>现在它只是一个链接.这是 onPlayerReady 函数的 javascript 代码
function onPlayerReady(event) {var playButton = document.getElementById("播放按钮");playButton.addEventListener("click", function(event) {if (event.data==YT.PlayerState.PLAYING) {player.pauseVideo();}别的 {player.playVideo();}});出于某种原因，当我单击链接时，它总是执行 else 命令.我怎样才能让它识别出当前正在播放的视频?有没有更好的方法来执行此播放/暂停切换操作?
onPlayerStateChange 的解决方案
函数 onPlayerStateChange(event) {if (event.data == YT.PlayerState.BUFFERING) {event.target.setPlaybackQuality('hd1080');}if (event.data == YT.PlayerState.PAUSED) {$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");this.is_playing = false;}if (event.data == YT.PlayerState.PLAYING) {$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");this.is_playing = true;}}完整代码
<div id="玩家"></div><脚本>var is_playing = false;var fullscreen = false;var live = true;var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var 播放器；函数 onYouTubePlayerAPIReady() {player = new YT.Player('玩家', {高度:'600'，宽度:'1067'，玩家变量:{自动播放:1，控制:0，相对:0，iv_load_policy: 3,节目信息:0},加载播放列表:{listType:'播放列表'},事件:{'onReady': onPlayerReady,'onStateChange': onPlayerStateChange,'onError': onErrorDetect}});}函数 onErrorDetect(event){如果(事件数据== 100){//未找到视频请求，视频已被删除或已标记为私有时发生错误event.target.nextVideo();} 别的{location.reload();}}函数 onPlayerReady(event) {event.target.setPlaybackQuality('default');event.target.loadPlaylist(gon.playlist,gon.s_index,gon.s_time);event.target.setLoop(true);//玩家控制var playButton = document.getElementById("播放按钮");var that = this;playButton.addEventListener("click", function(click_event) {如果(that.is_playing){$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");//如果(直播){//var liveimg = document.getElementById('live-icon');//liveimg.parentNode.removeChild(liveimg);//直播 = 假；//}player.pauseVideo();}别的 {$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");player.playVideo();}});var muteButton = document.getElementById("静音按钮");muteButton.addEventListener("点击", function() {if(player.isMuted()){$("#mute-button").attr("src", "http://www.beached.tv/assets/sound-2850c52028b16dd2c2e264c5dddb39ba.svg");player.unMute();}别的{$("#mute-button").attr("src", "http://www.beached.tv/assets/mute-8d50674fdbcdd2cc9597f009be41cea9.svg");播放器静音()；}});var 放大按钮 = document.getElementById("放大按钮");放大按钮.addEventListener(点击"，函数(){如果(全屏){$("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-enlarge-a44a4204dca596b45aacb25610ee3189.svg");player.setSize(1067,600);全屏 = 假；}别的{$("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-shrink-f63cf0e6ab1eb2bb8f7223798c4fc9c5.svg");player.setSize(1410,793);全屏 = 真；}});}函数 onPlayerStateChange(event) {if (event.data == YT.PlayerState.BUFFERING) {event.target.setPlaybackQuality('hd1080');}if (event.data == YT.PlayerState.PAUSED) {$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");this.is_playing = false;如果(直播){var liveimg = document.getElementById('live-icon');liveimg.parentNode.removeChild(liveimg);活=假；}}if (event.data == YT.PlayerState.PLAYING) {$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");this.is_playing = true;var current_time = Math.round(new Date().getTime()/1000);如果(当前时间> gon.end_of_stream){//location.reload();}}} 解决方案 onPlayerReady 参数 event 不可访问，因为您传递给 addEventListener 的函数也在使用该变量名
所以使用另一个变量名，例如:
<块引用>playButton.addEventListener("click", function(click_event) {
实际上有一个更大的错误.您想使用 onPlayerStateChange 的事件来告诉您状态.这是一个工作片段:
var is_playing = false;函数 onPlayerReady(事件){var playButton = document.getElementById("播放按钮");var that = this;playButton.addEventListener("click", function(click_event) {如果(that.is_playing){player.pauseVideo();}别的 {player.playVideo();}});}函数 onPlayerStateChange(event) {if (event.data == YT.PlayerState.PLAYING && !done) {this.is_playing = true;}}
I want to have a play / pause toggle button that controls my youtube video.
<a id="play-button">Play / Pause</a>
Right now it is just a link. This is the javascript code for the onPlayerReady function
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function(event) {
if (event.data==YT.PlayerState.PLAYING) {
player.pauseVideo();
}else {
player.playVideo();
}
});
For some reason when I click the link it always does the else command. How can I get it to recognize that the video is currently playing? Is there a better way to do this play / pause toggle action?
SOLUTION for onPlayerStateChange
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd1080');
}
if (event.data == YT.PlayerState.PAUSED) {
$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
this.is_playing = false;
}
if (event.data == YT.PlayerState.PLAYING) {
$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
this.is_playing = true;
}
}
FULL CODE
<div id="centerplayer">
<div id="player"></div>
<script>
var is_playing = false;
var fullscreen = false;
var live = true;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '600',
width: '1067',
playerVars:{
autoplay: 1,
controls: 0,
rel: 0,
iv_load_policy: 3,
showinfo: 0
},
loadPlaylist:{
listType:'playlist'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onErrorDetect
}
});
}
function onErrorDetect(event){
if (event.data == 100) {
//video request was not found, error occurs when video has been removed or has been marked as private
event.target.nextVideo();
} else{
location.reload();
}
}
function onPlayerReady(event) {
event.target.setPlaybackQuality('default');
event.target.loadPlaylist(gon.playlist,gon.s_index,gon.s_time);
event.target.setLoop(true);
//PLAYER CONTROLS
var playButton = document.getElementById("play-button");
var that = this;
playButton.addEventListener("click", function(click_event) {
if (that.is_playing) {
$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
// if(live){
// var liveimg = document.getElementById('live-icon');
// liveimg.parentNode.removeChild(liveimg);
// live = false;
// }
player.pauseVideo();
}else {
$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
player.playVideo();
}
});
var muteButton = document.getElementById("mute-button");
muteButton.addEventListener("click", function() {
if(player.isMuted()){
$("#mute-button").attr("src", "http://www.beached.tv/assets/sound-2850c52028b16dd2c2e264c5dddb39ba.svg");
player.unMute();
}else{
$("#mute-button").attr("src", "http://www.beached.tv/assets/mute-8d50674fdbcdd2cc9597f009be41cea9.svg");
player.mute();
}
});
var enlargeButton = document.getElementById("enlarge-button");
enlargeButton.addEventListener("click", function() {
if (fullscreen){
$("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-enlarge-a44a4204dca596b45aacb25610ee3189.svg");
player.setSize(1067,600);
fullscreen = false;
}else{
$("#enlarge-button").attr("src", "http://www.beached.tv/assets/resize-shrink-f63cf0e6ab1eb2bb8f7223798c4fc9c5.svg");
player.setSize(1410,793);
fullscreen = true;
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd1080');
}
if (event.data == YT.PlayerState.PAUSED) {
$("#play-button").attr("src", "http://www.beached.tv/assets/play-0a292db2c7cb500e5e768d0222ef1f94.svg");
this.is_playing = false;
if(live){
var liveimg = document.getElementById('live-icon');
liveimg.parentNode.removeChild(liveimg);
live = false;
}
}
if (event.data == YT.PlayerState.PLAYING) {
$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
this.is_playing = true;
var current_time = Math.round(new Date().getTime() / 1000);
if (current_time > gon.end_of_stream){
// location.reload();
}
}
}
</script>
解决方案 onPlayerReady parameter event isn't accessible, because the function you are passing to your addEventListener is also using that variable name
So use another variable name, ex:
playButton.addEventListener("click", function(click_event) {
There's actually a bigger error. You want to use onPlayerStateChange's event to tell the you the state. Here's a working snippet:
var is_playing = false;
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
var that = this;
playButton.addEventListener("click", function(click_event) {
if (that.is_playing) {
player.pauseVideo();
}else {
player.playVideo();
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
this.is_playing = true;
}
}
这篇关于YouTube 视频的播放/暂停按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
