基于web的视频_如何创建基于Web的视频播放器

最新推荐文章于 2024-05-14 09:35:02 发布

cune1359

最新推荐文章于 2024-05-14 09:35:02 发布

阅读量1.5k

点赞数

文章标签： css html js javascript java ViewUI

在上一篇文章中，我们介绍了有关如何创建Audio Web Player以及如何自定义其播放器外观的教程。

这次我们将用视频来做。是的，我们将创建一个Web Video Player。视频播放器将使用HTML5 <video>元素嵌入，因此从技术上讲，任何具有HTML5兼容性的浏览器都可以播放此视频。

如果浏览器不支持，则将提供嵌入式Flash Player作为后备，因此您需要先安装Flash插件，然后才能播放视频。下面的屏幕截图显示了视频播放器的最终输出。

和往常一样，在忙于编写代码之前，我们需要首先准备一些东西，尤其是视频。在本教程中，我们将使用来自Youtube上Kelli Anderson的 TED Talk的视频。要下载它，您可以使用名为KeepVid.com的 Web工具。

为了更广泛地兼容浏览器，我们需要提供两种视频格式：MP4和OGV。默认情况下，当您通过KeepVid.com从Youtube下载视频时，您很可能会获得MP4格式。您可以使用Miro Video Converter将MP4视频转换为OGV格式，Windows和OS X机器均可免费使用。

此外，我们还需要一个用于视频封面的图像文件。要创建此封面，您可以使用VLC播放视频，然后进入“ 视频”>“快照”以拍摄视频快照 。关于用户界面图标，我们将使用FontAwesome 。最后，我们还需要jPlayer ， jQuery来运行视频，以及一个新CSS文件来存储视频外观样式。

收集所有这些内容后，将它们放入相应的文件夹中，如下所示：

现在，创建一个新HTML文档，并在<head>部分中链接jQuery， jPlayer库以及CSS文件。

<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js&

关注