python 自动创建列表_创建一个自动HTML5视频播放列表

python 自动创建列表

In a previous article I demonstrated how to make a simple responsive video playlist using three links and just one <video> element. One of the limitations of the code was that each video did not automatically advance to the next when it finished playing. In this article, I’ll show how to solve that problem.

在上一篇文章中，我演示了如何使用三个链接和一个<video>元素来制作一个简单的响应式视频播放列表 。 该代码的局限性之一是，每个视频播放完毕后都不会自动前进到下一个视频。 在本文中，我将展示如何解决该问题。

This example will use a similar markup structure as the earlier one: I would recommend reading that article if the code is unfamiliar to you.

本示例将使用与先前示例类似的标记结构：如果您不熟悉代码，则建议阅读该文章 。

<figure id="video_player">
	<div id="video_container">
		<video controls poster="vid-glacier.jpg">
			<source src="glacier.webm" type="video/webm">
			<source src="glacier.mp4" type="video/mp4">
		</video>
	</div>
	<figcaption>
		<a href="glacier.mp4" class="currentvid">
			<img src="glacier.jpg" alt="Athabasca Glacier">
		</a>
		<a href="lake.mp4">
			<img src="lake.jpg" alt="Athabasca Lake">
		</a>
		<a href="mountain.mp4">
			<img src="mountain.jpg" alt="Mountain">
		</a>
	</figcaption>
</figure>

There is an extra <div> around the <video> in this example to deal with iOS (which will not scale video correctly without a little guidance). The CSS is also very similar to the earlier example:

在此示例中， <video> <div>周围有一个额外的<div>以处理iOS(如果没有一点指导，它将无法正确缩放视频)。 CSS也与前面的示例非常相似：

#video_player {
	display: table;
	line-height: 0;
	font-size: 0;
	background: #000;
	max-width: 1000px;
	margin: 0 auto;
}
#video_container {
	position: relative; 
}
#video_player div,
#video_player figcaption {
	display: table-cell;
	vertical-align: top;
}
#video_container video { 
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
}
#video_player figcaption { 
	width: 25%; 
}
#video_player figcaption a {
	display: block;
}
#video_player figcaption a {
	opacity: .5;
	transition: 1s opacity;
}
#video_player figcaption a img,
figure video {
	width: 100%;
	height: auto;
}
#video_player figcaption a.currentvid,
#video_player figcaption a:hover,
#video_player figcaption a:focus { 
	opacity: 1; 
}
@media (max-width: 700px) {
	#video_player video,
	#video_player figcaption { 
		display: table-row;
	}
	#video_container {
		padding-top: 56.25%; 
	}
	#video_player figcaption a {
		display: inline-block;
		width: 33.33%; 
	}
}

The .currentvid class highlights the video that is currently playing.

.currentvid类突出显示当前正在播放的视频。

JavaScript (The JavaScript)

The first few lines of JavaScript, placed at the end of the page, are the same as the previous version:

位于页面末尾的JavaScript的前几行与先前版本相同：

var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
path = '',
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");

The only additions are link_list, currentVid. allLnks and lnkNum variables, all relevant to the creation of the playlist. path is the location of the videos, which is unused in this case: the code assumes that all files are in the same location.

唯一的增加是link_list和currentVid 。 allLnks和lnkNum 变量 ，均与播放列表的创建有关。 path是视频的位置，在这种情况下未使用：代码假定所有文件都在同一位置。

Playing a video is now contained in the playVid function, which is wrapped in a closure, together with a for loop that fills the link_list array:

现在，播放视频包含在playVid函数中，该函数包装在一个闭包中，同时包含一个填充link_list数组的for循环：

(function() {
	function playVid(index) {
		video_links.children[index].classList.add("currentvid");
		source[0].src = path + link_list[index] + ".mp4";
		source[1].src = path + link_list[index] + ".webm";   
		currentVid = index;
		video.load();
		video.play();
	}
	for (var i=0; i<lnkNum; i++) {
		var filename = allLnks[i].href;
		link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
			(function(index){
				allLnks[i].onclick = function(i){
					i.preventDefault();
						for (var i=0; i<lnkNum; i++) {
							allLnks[i].classList.remove("currentvid");
						}
					playVid(index);
				}
		})(i);
}

The link_list uses a more efficient regular expression to get the filename from each link. Every video link is then connected to the playVid function, to which it carries the index of the clicked link. Each link is also prevented from opening a video in a fresh browser window.

link_list使用更有效的正则表达式从每个链接获取文件名。 然后，每个视频链接都连接到playVid函数，该函数携带点击链接的index 。 还防止每个链接在新的浏览器窗口中打开视频。

Next, we need to look for a video ending, remove the currentvid class from all other links, then play the next logical video:

接下来，我们需要查找视频结尾，从所有其他链接中删除currentvid类，然后播放下一个逻辑视频：

video.addEventListener('ended', function () {
	allLnks[currentVid].classList.remove("currentvid");
	if ((currentVid + 1) >= lnkNum) {
		nextVid = 0;
	} else {
		nextVid = currentVid+1; 
	}
	playVid(nextVid);
})

The last version of this code didn’t allow the user to control individual videos as they play: we’ll correct that with some event listeners:

该代码的最新版本不允许用户在播放单个视频时对其进行控制：我们将通过一些事件监听器予以纠正：

video.addEventListener('mouseenter', 
	function() {
		video.setAttribute("controls","true");
	})
	video.addEventListener('mouseleave', function() {
		video.removeAttribute("controls");
	})

That’s it. You may note enhanced accessibility in the example: once you click on a video thumbnail, you can navigate the list using cursor keys, and use return to start the selected video. I’ll cover this technique in a future article.

而已。 您可能会在示例中注意到增强的可访问性：单击视频缩略图后，可以使用光标键导航列表，然后使用return键启动所选视频。 我将在以后的文章中介绍这种技术。

翻译自: https://thenewcode.com/909/Create-An-Automatic-HTML5-Video-Playlist

python 自动创建列表