- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想要一个播放/暂停切换按钮来控制我的youtube视频。
<a id="play-button">Play / Pause</a>
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();
}
});
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;
}
}
<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参数事件无法访问,因为传递给addEventListener的函数也使用该变量名
因此,请使用另一个变量名称,例如:
playButton.addEventListener("click", function(click_event) {
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;
}
}
关于javascript - youtube视频的播放/暂停按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63997157/
我在 Window 2008 x64 上的 IIS 7 下托管了一个网站。 IIS 以 64 位模式运行,该站点有自己的 64 位应用程序池等。该网站大部分时间似乎运行良好,然后每小时突然卡住用户请求
我有一个 imageView 并希望它像这样工作: ImageViewer可见 5秒暂停 ImageView 不可见 5秒暂停 ImageViewer可见 等等... 我该怎么做?我试过 sleep
我在我的 JavaScript 函数中使用了下面的代码。我想在 10 秒后调用这个函数。然而该函数立即被触发!?!不确定发生了什么。 function testing() { //oth
我想暂停计时器,点击按钮后我想继续计时器计数...我搜索但找不到与此相关的功能.. 怎么办? 最佳答案 您将需要一个变量来跟踪自 Chronometer 启动以来耗时: long timeWhenSt
我目前有一个程序可以从麦克风收集声音信号并在 python 上实时显示波形。对于 matplotlib funcanimation,我正在尝试通过这种方式向我的程序添加一些暂停和启动按钮或功能。但它没
我有一个由套接字提供的热Observable。我可以使用pausable暂停套接字供稿。但是一旦“取消暂停”可观察对象,就需要显示套接字在暂停订阅时可能发送的最后一个值。我不想跟踪套接字手动发送的最后
我知道这是可能的,但我还没有找到方法,所以我在问。 在播放 3rd 方音乐(例如 Spotify)时开始在我的应用程序中播放 mp3 声音时。 Spotify 暂停,您必须恢复 Spotify,让它再
我正在尝试使用 iPhone 的前置摄像头录制有声视频。因为我还需要支持暂停/恢复功能,所以我需要使用 AVAssetWriter .我在网上找到了一个用 Objective-C 编写的示例,它几乎实
我知道互斥锁可以作为一种实现,但是我想知道是否有一种方法可以像视频播放一样暂停/恢复另一个线程。当其他正在运行的线程很复杂时,此方法更易于编程。 最佳答案 SIGTSTP是用于暂停进程的信号,如果您有
到目前为止,我已经看到了以下停止动画的技术,但我在这里寻找的是旋转 View 停止在当前的角度,而不是返回到 0。 struct DemoView: View { @State private
我一般在问有关多线程的问题。例如我锁定了一个互斥锁并恢复任务,然后我想挂起它,我的问题是,我应该在挂起之前解锁互斥锁吗?这样当我再次使用互斥锁恢复它时,它会成功恢复吗? 我刚刚开始使用多线程的东西,我
我有2个缩略图链接,单击它们时,它们会以灯箱样式打开视频。我的目标是让它们在打开时播放,在关闭时暂停(单击背景区域时关闭)。 我的HTML代码在这里: M
到目前为止,我没有将我发现的几种不同方法拼凑在一起: http://192.185.121.49/~steveobr/ 我需要所有的语音演示像第一个“商业”一样工作 正如您在实时示例中看到的那样,每个
所以我正在制作某种游戏,玩家可以在其中获得一些能力。玩家回合结束后,服务器应有 5 秒的超时时间,其中不执行任何代码,然后在该时间后结束回合。但是,如果客户端单击其中一项电源,服务器应停止 5 秒超时
我尝试将自己的方法添加到 Tween 类中以暂停/恢复所有补间。这就是我所拥有的: createjs.Tween.pauseAllTweens = function() { for ( var
我对 Azure 搜索标准级别的成本有疑问。是否可以将 Azure 搜索级别从标准更改为基本?是否可以暂时暂停 Azure 搜索标准?我在门户中没有看到此控件。我是否需要将 Azure 搜索实现重新创
如何用相同的代码制作play/Pause按钮。 - (IBAction)min:(id)sender { NSString *path = [[NSBundle mainBundle] pathF
我知道这很可能超出了沙箱范围,但我还是想问一下: 我想在我的应用程序中放置一个“暂停/播放”按钮,以暂停或播放任何背景音频。基本上,我希望实现在多任务栏中找到的播放/暂停按钮。 一个简单的例子是有人用
我正在制作一款编程游戏,玩家可以在其中对盟友的行为进行编程。玩家为给定的盟友编写decide()函数的主体,可以用任何java代码填写,但必须返回一个 Action 。我想为每个盟友提供一组有限的每个
我有功能 1 用于播放音乐,第二个用于设置实际音乐的暂停,我的暂停功能不起作用。我该如何设置暂停? function play(id){ var audio = new Audio('
我是一名优秀的程序员,十分优秀!