製作相同的按鈕播放/暫停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視頻

回答

相關問題