跳到主要内容

如何使用HTML视频

移动到YouTube ...用

在本教程中,我们将介绍视频的基本设置,选择要播放的文件以及生成缩略图。

01.创建一个基本页面

让我们从HTML页面大纲开始。我们需要一个简单的div结构,一些CSS用于样式,最重要的是一个脚本文件。您会注意到视频标记现在是空的,因此在加载页面时不会执行任何操作。但是,我们给它一个ID所以我们可以用JavaScript控制它。

我的HTML视频播放器

欢迎来到我的视频库!

滚动下面的视频,然后单击要播放的视频。

02.设置页面样式

接下来,我们将开始在页面中添加样式。在我们尝试做任何太聪明的事情之前,让我们首先在几个div元素中添加基本样式,让事情看起来更加可敬。

body {background-color:#cccccc; font-family:sans-serif; } #player-container {margin-left:auto; margin-right:auto;宽度:640px;身高:480px; background-color:#538c99; border-radius:20px; } #title {margin-left:auto; margin-right:auto;宽度:640px; text-align:center; padding-top:30px; padding-bottom:50px; background-color:#538c99;颜色:#333333; border-radius:20px; }

03.添加更多样式

当我们设置缩略图容器div的样式时,事情变得更有趣。我们打算填补这个IMG元素,这将是我们的视频生成的缩略图。因此,如果我们有比一次显示的缩略图更多的缩略图,我们希望它显示水平滚动条。我们可以使用溢出 - X属性。

#locket-container {background-color:#cccccc; margin-top:30px; margin-left:auto; margin-right:auto;宽度:640px;身高:120px; overflow-x:scroll;溢出y:隐藏;白色空间:nowrap; border-radius:20px; }

04.适当调整视频播放器的大小

我们需要做的还有一点造型。实际上,当我们开始播放视频时,它们将以其原始分辨率显示。这在页面上看起来不太好。让我们设置视频元素的样式以确定它应该有多大。如果我们将其宽度和高度设置为100%,它将只填充其包含的div。

视频{宽度:100%;身高:100%; }

05.设置脚本

现在是时候开始使用JavaScript了。让我们准备一个数组中的视频文件列表供它使用(我们现在将硬编码,但您可以尝试将其配置为通过HTTP服务从JSON检索)。

我们还将定义一些我们稍后将使用的变量:'播放机'将成为视频元素; “PlayerSource'将是一个新创建的源元素,稍后将成为播放器对象的子元素,并指向源文件。我们还计划挂钩DOMContentLoaded事件,以确保脚本在开始行动之前等待页面加载。

var videoFiles = [“1.mp4”,“2.mp4”,“3.mp4”,“4.mp4”,“5.mp4”]; var player; var playerSource = document.createElement(“source”); document.addEventListener(“DOMContentLoaded”,function(){initialise();},false);

请注意,浏览器中的视频播放依赖于可以读取您正在使用的视频格式的编解码器。为了确保您的视频跨浏览器工作,最安全的选择是使用H.264编解码器的MP4文件。

06.生成缩略图

接下来让我们创建一个从视频文件生成图像缩略图的功能。我们希望这可以接收视频对象并返回图像对象。在内部,我们实现这一目标的方式就是使用HTML画布

function generateThumbnail(video){var canvas = document.createElement(“canvas”); var container = document.getElementById(“thumbnail-container”); var width = container.clientWidth; var height = container.clientHeight; canvas.width =(width / 3); canvas.height = height; canvas.getContext(“2d”)。drawImage(video,0,0,canvas.width,canvas.height); var image = document.createElement(“img”); image.src = canvas.toDataURL();返回图像; }

07.加载视频时自动生成缩略图

现在我们可以使用generateThumbnail函数并将其用于列表中的每个视频文件。让我们通过实现这个来实现初始化()功能。此函数将playerSource对象添加为视频元素的子对象,然后遍历列表中的每个文件,将其加载到临时视频对象中,加载后生成缩略图并将其添加到缩略图容器中。

function initialise(){player = document.getElementById(“player”); player.appendChild(playerSource); player.controls = false; videoFiles.forEach(function(file){var thumbSource = document.createElement(“source”); thumbSource.src = file; var thumbVideo = document.createElement(“video”); thumbVideo.addEventListener(“loadeddata”,function() {var container = document.getElementById(“thumbnail-container”)var image = generateThumbnail(thumbVideo); container.appendChild(image);},false); thumbVideo.appendChild(thumbSource);}); }

但是有些东西缺失了。我们的缩略图显示在容器中,但它们都不可点击。我们需要将图像包装成一个元素,单击时需要执行一些JavaScript。让我们调整钩住的函数Loadeddata事件也可以创建链接,而不仅仅是IMG元素。

thumbVideo.addEventListener(“loadeddata”,function(){var container = document.getElementById(“thumbnail-container”)var image = generateThumbnail(thumbVideo); var link = document.createElement(“a”); link.href =“ javascript:play(\“”+ thumbSource.src +“\”)“; link.appendChild(image); container.appendChild(link);},false);

09.播放视频

现在我们正在生成带有可点击链接的缩略图,这些链接设置为可以调用玩(thumbSource.src),哪里ThumbSource.src指向相关视频文件的文件名。剩下的就是实现播放功能来设置playerSource(你会记得我们链接到视频播放器元素)指向正确的文件并开始播放。

function play(url){playerSource.src = url; player.controls = true; player.load(); player.play(); }

本文最初出现在Web Designer的第266期,这是一个创意网页设计杂志 - 提供专家教程,前沿趋势和免费资源。在这里购买第266期要么在这里订阅Web Designer

相关文章:



翻译字数超限