使用
在本教程中，我们将介绍视频的基本设置、选择要回放的文件以及生成缩略图。不是你的东西吗?使用一个网站建设者创建没有代码的网站，并探索您的网站虚拟主机选项。
01.创建一个基本页面
让我们从HTML页面大纲开始。我们需要一个简单的div结构，一些用于样式化的CSS，最重要的是，一个脚本文件。你会注意到视频标签现在是空的，所以当你加载页面时它什么也不做。然而，我们给它一个id所以我们可以用JavaScript控制它。
< !DOCTYPE html> 我的html视频播放器
欢迎来到我的视频库!< h1>滚动下面的视频，并单击一个你想播放。
02.样式页面
接下来，我们将开始向页面添加样式。在我们尝试做任何太聪明的事情之前，让我们首先向一些Div元素添加基本的样式，所以事情看起来更尊重。
主体{背景色:#cccccc;字体类型:无衬线;} #player-container {margin-left: auto;margin-right:汽车;宽度:640 px;身高:480 px;background - color: # 538 c99;border - radius: 20 px;} #title {margin-left: auto;margin-right:汽车; width: 640px; text-align: center; padding-top: 30px; padding-bottom: 50px; background-color: #538c99; color: #333333; border-radius: 20px; }03.添加更多造型
当我们来到缩略图 - 集装箱DIV时，事情变得更有趣。我们要填补这个IMG.元素，这将是从我们的视频生成的缩略图。因此，如果缩略图比一次显示的要多，我们希望它显示水平滚动条。我们可以用overflow-x.财产。
#thumbnail-container {background-color: #cccccc;margin-top: 30 px;margin-left:汽车;margin-right:汽车;宽度:640 px;身高:120 px;overflow-x:滚动;overflow-y:隐藏;空白:nowrap;}border - radius: 20 px; }04.适当的视频播放器尺寸
我们还需要做一点造型。事实上，当我们开始播放视频时，它们将以其固有的分辨率显示。这在纸上看起来不好看。让我们对video元素进行样式化，以确定它的大小。如果我们设置它的宽度和高度为100%，它就会填充包含它的div。
视频{宽度:100%;高度:100%;}05.设置脚本
是时候才能达到javascript了。让我们在数组中准备一个视频文件列表，以便它使用（我们现在的硬代码，但您可以尝试将其配置为通过HTTP服务通过JSON检索。
我们还将定义一对我们稍后使用的变量：'播放器’将成为视频元素;”PlayerSource.'将是一个新创建的源元素，它将成为稍后的播放器对象的子项，并指向源文件。我们也计划勾勒出来domcontentloaded.事件以确保脚本等待页面以在踢进行动之前加载。
var Videofiles = [“1.mp4”，“2.mp4”，“3.mp4”，“4.mp4”，“5.mp4”];var播放器;var playersource = document.createelement（“源”）;document.addeventListener（“DomContentLoaded”，function（）{initialise（）;}，false）;请注意，浏览器中的视频回放依赖于能够读取您正在使用的视频格式的编解码器的存在。为了确保你的视频可以跨浏览器播放，最安全的方法是使用H.264编解码器的MP4文件。
06.生成缩略图
接下来让我们创建一个将从视频文件中生成图像缩略图的函数云储存)。我们想让它接收一个视频对象并返回一个图像对象。在内部，我们实现这一点的方式是使用html画布。
函数generatethumbnail（视频）{var canvas = document.createelement（“canvas”）;var container = document.getElementById（“缩略图 - 容器”）;var宽度= container.clientwidth;var height = container.clientheight;canvas.width =（宽度/ 3）;canvas.height =高度;canvas.getContext（“2D”）。绘图（视频，0,0，canvas.width，canvas.height）;var image = document.createelement（“img”）;image.src = canvas.todataurl（）;返回图像; }07.自动生成缩略图作为加载视频
现在我们可以拍摄GenerateThumbnail函数并在我们列表中的每个视频文件上使用它。让我们来实现这一点initialise（）函数。这个函数将添加playerSource对象作为video元素的子元素，然后遍历列表中的每个文件，将其加载到一个临时视频对象中，加载后生成一个缩略图并将其添加到缩略图容器中。
函数初始化(){播放器= document.getElementById(“播放器”);player.appendChild (playerSource);的球员。控制= false;function(file) {var thumbSource = document.createElement(“源”);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); }); }08.添加到缩略图的链接
不过，有些东西缺失。我们的缩略图显示在容器中，但它们都不是可点击的。我们需要将图像包装在一起<一>元素，需要在单击时执行一些JavaScript。让我们调整挂钩的功能loadeddata.创建链接的事件也不只是IMG.元素。
thumbVideo。addEventListener("loadeddata"，函数(){var container = document.getElementById("thumbnail-container") var image = generatthumbthumbnail (thumbVideo);var link = document.createElement("a");链接。href = "javascript:play(\"" + thumbSource。src +“\”)”;link.appendChild(图片);container.appendChild(链接);},假);09.播放视频
现在，我们正在生成带有可单击链接的缩略图，这些链接被设置为调用玩(thumbSource.src),在那里thumbSource.src指向相关视频文件的文件名。剩下的是实现播放功能来设置PlayerSource（您将重新调用我们链接到Video Player元素）以指向正确的文件并启动播放。
功能播放（URL）{playerSource.src = URL;player.controls = true;player.load（）;Player.play（）;}本文最初出现在Web Designer的第266期，创意网络设计杂志 - 提供专家教程，尖端趋势和自由资源。在这里购买问题266或者订阅这里的网页设计师。
相关文章:
