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) {
	// 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 (document.body.querySelectorAll(".supervideo")[0].paused) {
    		document.body.querySelectorAll(".supervideo")[0].play();
    		container.querySelector("#supervideo-playbutton").innerHTML = "| |"
    	} else {
      	document.body.querySelectorAll(".supervideo")[0].pause();
    		container.querySelector("#supervideo-playbutton").innerHTML = "►"
    	}
	});
}

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

	[].forEach.call(videos, function(video) {
		// Hide controls if the player has tdem
		if (video.hasAttribute("controls")) {
			video.controls = false;
		}
		// Create video container
		var container = document.createElement('div');
    	container.setAttribute("class", "supervideo-container");
    	video.parentElement.appendChild(container);
    	container.appendChild(video);
    	// Created media controls
    	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>';
    	initializeControls(container, video);
	});
}

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) {
	// 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 = "►"
    	}
	});
}

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

	[].forEach.call(videos, function(video) {
		// Hide controls if the player has tdem
		if (video.hasAttribute("controls")) {
			video.controls = false;
		}
		// Create video container
		var container = document.createElement('div');
    	container.setAttribute("class", "supervideo-container");
    	video.parentElement.appendChild(container);
    	
      //container.appendChild(video);
    	
      // Created media controls
    	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>';
    	initializeControls(container, video);
	});
}

createVidElement();

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