HTML5 视频播放器卡在海报上

Question

我正在尝试为 HTML5 视频制作自己的自定义控件。到目前为止，我只实现了一个播放/暂停按钮，但我遇到了问题。

视频在启动时不播放，所以当我点击自定义播放按钮时，我可以听到视频的音频 - 但视频卡在海报图片上。

我的演示有一个 JSFiddle 的问题（尝试点击播放按钮）：https://jsfiddle.net/9gpg6gbd/

这是播放/暂停按钮代码的 sn-p：

// 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>