HTML5視頻播放器停留在海報

Question

我試圖讓自己的自定義控制對HTML5視頻。到目前爲止，我只實現了一個播放/暫停按鈕，但我碰到的一個問題。

視頻在啓動時不玩了，所以當我點擊自定義播放按鈕，我可以聽到視頻的音頻 - 但視頻是停留在海報圖像。

我有我的演示這個問題的的jsfiddle（嘗試點擊播放按鈕）：https://jsfiddle.net/9gpg6gbd/

這是播放/暫停按鈕的代碼片段：

// Initialize play button 
if (video.paused) { 
    container.querySelector("#supervideo-playbutton").innerHTML = "►" 
} else { 
    container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
} 
container.querySelector("#supervideo-playbutton").addEventListener("click", function(){ 
    if (video.paused) { 
     video.play(); 
     container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
    } else { 
     video.pause(); 
     container.querySelector("#supervideo-playbutton").innerHTML = "►" 
    } 
}); 

任何幫助將是非常感謝，我難住這一個。

Answer 1

你必須錯誤：

1. 不要添加視頻標籤內的HTML元素。
2. 不要在可變召開視頻元素並改變它的位置。

解決方案＃1：

替換您video.play()與選擇。

function initializeControls(container, video) { 
 
\t // Initialize play button 
 
\t if (video.paused) { 
 
     container.querySelector("#supervideo-playbutton").innerHTML = "►" 
 
    } else { 
 
     container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
 
    } 
 
    container.querySelector("#supervideo-playbutton").addEventListener("click", function(){ 
 
    \t if (document.body.querySelectorAll(".supervideo")[0].paused) { 
 
    \t \t document.body.querySelectorAll(".supervideo")[0].play(); 
 
    \t \t container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
 
    \t } else { 
 
     \t document.body.querySelectorAll(".supervideo")[0].pause(); 
 
    \t \t container.querySelector("#supervideo-playbutton").innerHTML = "►" 
 
    \t } 
 
\t }); 
 
} 
 

 
function createVidElement() { 
 
\t var videos = document.body.querySelectorAll(".supervideo"); 
 

 
\t [].forEach.call(videos, function(video) { 
 
\t \t // Hide controls if the player has tdem 
 
\t \t if (video.hasAttribute("controls")) { 
 
\t \t \t video.controls = false; 
 
\t \t } 
 
\t \t // Create video container 
 
\t \t var container = document.createElement('div'); 
 
    \t container.setAttribute("class", "supervideo-container"); 
 
    \t video.parentElement.appendChild(container); 
 
    \t container.appendChild(video); 
 
    \t // Created media controls 
 
    \t container.innerHTML = container.innerHTML + '<table cellpadding="0" cellspacing="0" id="supervideo-controls"><tr> <td><button id="supervideo-playbutton" type="button">&#215;</button></td> <td>Time</td> <td>Scrollbar</td> <td>Mute button</td> <td>Volume</td> <td>Fullscreen</td> </tr></table>'; 
 
    \t initializeControls(container, video); 
 
\t }); 
 
} 
 

 
createVidElement();

<video width="100%" controls class="supervideo"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" /> 
 
</video>

解決方案2：

在foreach裏你改變了<Video>標籤的位置。你將它附加到新的容器中。在此行後您的選擇器將無效，您必須重新分配您的選擇器。

function initializeControls(container, video) { 
 
\t // Initialize play button 
 
\t if (video.paused) { 
 
     container.querySelector("#supervideo-playbutton").innerHTML = "►" 
 
    } else { 
 
     container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
 
    } 
 
    container.querySelector("#supervideo-playbutton").addEventListener("click", function(){ 
 
    \t if (video.paused) { 
 
    \t \t video.play(); 
 
    \t \t container.querySelector("#supervideo-playbutton").innerHTML = "| |" 
 
    \t } else { 
 
    \t \t video.pause(); 
 
    \t \t container.querySelector("#supervideo-playbutton").innerHTML = "►" 
 
    \t } 
 
\t }); 
 
} 
 

 
function createVidElement() { 
 
\t var videos = document.body.querySelectorAll(".supervideo"); 
 

 
\t [].forEach.call(videos, function(video) { 
 
\t \t // Hide controls if the player has tdem 
 
\t \t if (video.hasAttribute("controls")) { 
 
\t \t \t video.controls = false; 
 
\t \t } 
 
\t \t // Create video container 
 
\t \t var container = document.createElement('div'); 
 
    \t container.setAttribute("class", "supervideo-container"); 
 
    \t video.parentElement.appendChild(container); 
 
    \t 
 
     //container.appendChild(video); 
 
    \t 
 
     // Created media controls 
 
    \t container.innerHTML = container.innerHTML + '<table cellpadding="0" cellspacing="0" id="supervideo-controls"><tr> <td><button id="supervideo-playbutton" type="button">&#215;</button></td> <td>Time</td> <td>Scrollbar</td> <td>Mute button</td> <td>Volume</td> <td>Fullscreen</td> </tr></table>'; 
 
    \t initializeControls(container, video); 
 
\t }); 
 
} 
 

 
createVidElement();

<video width="100%" controls class="supervideo"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" /> 
 
</video>