h5 自定义视频控件_带有JavaScriptHTML5视频的简单自定义控件

h5 自定义视频控件

Any device that supports HTML5 content must also, by definition, support HTML5 audio and video. It follows that these clients must also feature controls for AV content, initiated by using the controls attribute in your HTML. However the appearance of those controls is left up to the client: multimedia controls look quite different in IE 9 compared to Chrome. This is an issue for any designer who wishes to integrate a particular UI look-and-feel into all aspects of their website, or to make their site appear as similar as possible across different browsers and platforms.

根据定义，任何支持HTML5内容的设备也必须支持HTML5音频和视频 。 因此，这些客户端还必须具有通过使用HTML中的controls属性启动的AV内容controls 。 但是，这些控件的外观要由客户端决定：与Chrome相比，IE 9中的多媒体控件看上去有很大不同。 对于任何希望将特定的UI外观集成到其网站的各个方面，或希望使其网站在不同的浏览器和平台上看起来尽可能相似的设计师，这都是一个问题。

It is entirely possible to make consistent custom AV controls for HTML5 with a little work and JavaScript. Before we add any scripting, however, we should be aware of a few things:

只需少量的工作和JavaScript，就可以为HTML5制作一致的自定义AV控件。 但是，在添加任何脚本之前，我们应该注意以下几点：

Keeping to the best practices of graceful degradation and progressive enhancement, we will leave A/V controls on for the video by default, and then use JavaScript to turn them off and insert our own controls. The idea behind this is simple: if the client blocks JavaScript, they will still have the ability to play our audio and video content using the browser’s built-in controls. If they have JavaScript enabled, our own controls will be substituted for the defaults.

保持以最佳实践优雅降级和渐进增强 ，我们将留在默认情况下为视频A / V控件，然后使用JavaScript将其关闭 ，并插入我们自己控制。 这背后的想法很简单：如果客户端阻止JavaScript，他们仍然可以使用浏览器的内置控件来播放我们的音频和视频内容。 如果它们启用了JavaScript，则我们自己的控件将替换为默认值。

The JavaScript controls over HTML audio and video are implemented in the form of two simple methods: play() and pause(). More advanced controls such as rewind and scene access are possible, but will not be the focus of this article.

HTML音频和视频JavaScript控件以两种简单方法的形式实现： play()和pause() 。 可以使用诸如倒带和场景访问之类的更高级的控件，但这不是本文的重点。

First, let’s get the basic video on the page, together with the HTML that our JavaScript will hook into. (If you’re not familiar with HTML5 video or codecs, you might want to read the associated reading list).

首先，让我们在页面上获取基本视频，以及我们JavaScript可以插入HTML。 (如果您不熟悉HTML5视频或编解码器，则可能需要阅读相关的阅读清单 )。

To create the play button, I’ll use the Unicode character “black right-pointing triangle” (U+25BA),with “black medium square” (U+25fC) representing stop, which have the advantages of very easy creation and alteration in size and color without loss of quality. I’ll integrate the controls into a figcaption element to minimize UI space.

要创建播放按钮，我将使用Unicode字符“黑色右指向三角形”( U + 25BA )，用“黑色中号正方形”( U + 25fC )表示停止，其优点是非常易于创建和更改在尺寸和颜色上没有损失质量。 我将控件集成到figcaption元素中以最小化UI空间。

<figure id="customcontrols">
	<video controls poster="here-be-dragons.png">
		<source src="here-be-dragons.m4v" type="video/mp4">
		<source src="here-be-dragons.webm" type="video/webm">
	</video>
	<figcaption>
		<a href="#">▶</a>
		<cite>Here Be Dragons</cite>
	</figcaption>
</figure>

We’ll add some CSS that will hide our controls by default, and tidy up the display:

我们将添加一些CSS，这些CSS默认情况下将隐藏我们的控件，并整理显示内容：

#customcontrols {
	font-size: 0;
}
#customcontrols figcaption { 
	background: rgba(0,0,0,0.6); 
	display: none; padding: .5em; 
	color: #fff;
	position: relative; top: -2.2rem;
	text-align: right;
	margin-bottom: -2.2rem;
}
#customcontrols figcaption a { 
	text-decoration: none; font-size: 1rem; 
	margin-right: .5rem;
	color: #fff;
	border-bottom: none;
}
#customcontrols a:hover { color: red; }
#customcontrols a:visited { color: #770; }

I’ve used relative positioning and an rgba background color to place the caption on top of the video, but made it invisible by default. In the script we’ll turn off native controls for the video and substitute our own:

我已经使用relative定位和rgba背景色将标题放在视频顶部，但默认情况下使其不可见。 在脚本中，我们将关闭视频的本机控件，并替换为我们自己的控件：

var moviecontainer = document.getElementById("customcontrols"),
movie = moviecontainer.querySelector("video"),
controls = moviecontainer.querySelector("figcaption"),
playpause = controls.querySelector("a");
movie.removeAttribute("controls");
controls.style.display = "block";

To this code we’ll add:

在此代码中，我们将添加：

playpause.addEventListener("click", function(e) { 
	e.preventDefault()
	if (movie.paused) {
		movie.play();
		playpause.innerHTML = "◼";
	} else { 
		movie.pause();
		playpause.innerHTML = "►";
	}
})

A simple explanation: if the movie is paused, it is set to play, and the link turned to represent a stop button. Otherwise, the movie is playing, and must be paused.

一个简单的解释：如果电影被暂停，则将其设置为播放，并且链接变为代表停止按钮。 否则，电影正在播放，必须暂停。

翻译自: https://thenewcode.com/479/Easy-Custom-Controls-For-HTML5-Video-with-JavaScript

h5 自定义视频控件