• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

如何使用JavaScript的简易视频播放器

ngkoma • 2年前 (2022-05-22) • JavaScript

视频已成为网站和在线业务的重要组成部分。这主要是因为人们普遍在移动设备上获得更快（并且在大多数情况下更便宜）的互联网数据计划。另一个起作用的因素是对视频内容的更高参与度。与阅读大量文本相比，人们更有可能观看并记住一段有趣的、制作精良的视频。

如何使用JavaScript的简易视频播放器 第1张

为什么要使用简易视频播放器？

您可能想知道为什么应该使用Easy Video Player而不是免费替代品或任何其他付费脚本。

选择这款播放器的最大原因之一是它功能丰富。首先，它是响应式的。这意味着它看起来很适合各种尺寸的设备。它已针对在移动设备和台式机上播放视频进行了优化。

它支持多种视频质量，因此用户可以在视频的标清、高清和全高清版本之间切换，类似于 YouTube。您还可以在运行时控制视频的播放速度。也可以为单个视频添加多种语言的字幕。然后用户可以选择他们想要在运行时显示的字幕。

如果您想允许观众下载视频，您可以在全局或单个视频上显示可选的下载按钮。

Easy Video Player 还可以播放来自各种来源的视频。您可以使用它来播放本地视频、从服务器流式传输视频或嵌入 YouTube 或 Vimeo 视频。

您可以使用前贴片广告、插播广告或后贴片广告从这些视频中获利。还可以在视频中添加弹出广告并控制其显示和隐藏时间。Easy Video Player 允许您在用户暂停视频时显示广告。

为了确保用户不能通过简单地抓取页面源来窃取视频，可以对视频路径进行加密。您还可以对视频进行密码保护，以限制对一组特定用户的访问。

功能列表并没有到此结束。我的建议是您访问脚本描述页面以了解Easy Video Player的所有功能。

我们将建造什么

完成本教程后，您将拥有一个支持注释的功能齐全的视频播放器。视频播放器的最终版本将如下图所示。

如何使用JavaScript的简易视频播放器 第2张

我们将在 本教程中使用来自Pixabay上的知更鸟视频。

入门

在阅读了 Easy Video Player 具有如此多的功能之后，您可能会认为它很难配置或使用。但是，正如您将在本教程中看到的，启动和运行脚本一点也不复杂。

在我们开始之前我应该指出的一件事是，您使用 Easy Video Player 播放的服务器上的任何本地视频都应该位于名为content的文件夹中。这样，您可以确定播放器的所有功能都将按预期工作。

购买Easy Video Player后，您将能够下载脚本和文档。该文档包含许多工作示例，只需更改视频的源路径或 URL，即可将其直接添加到您的网站。使用此播放器在网页中快速嵌入视频的最快和最简单的方法是使用工作示例本身的部分。只需进行适当的更改以满足您自己的需求。

第一步是在您的网页中包含css和 javascript 文件。

<!DOCTYPE html> <html>   <head>     <title> Easy Video Player - TutsPlus Example </title>     <meta charset="utf-8">     
<meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="content/global.css">
     <script type="text/JavaScript" src="java/FWDEVPlayer.js"></script>         </head>   <body>        
     <!-- WE WILL ADD OUR VIDEO PLAYER HERE -->      
     </body> </html>

默认情况下，播放器将 CSS 文件保存在content文件夹中，将 JavaScript 文件保存在java文件夹中。如果您更改这些文件的位置，请确保您也更新了它们在网页上的路径。

现在，您必须为视频播放器指定一个容器。这个容器div将有一个唯一的id，它被传递给 Easy Video Player 的构造函数。您可以为此div设置 CSS 属性margin以使其在网页上水平居中，但这是可选的。auto

在您希望视频播放器出现的网页正文中添加以下 HTML。

<div id="topVideo"></div>

虽然这不是必需的，但您可以添加一些 CSS 以使视频播放器看起来更好或将其正确放置在网页上。这是我们将用于此目的的 CSS。

body {
	background-color: #efefef;
	cursor: auto;
}
#topVideo {
	box-shadow: 0 0 20px #989898, 0 0 50px #b0b0b0;
	margin: 50px auto;
}

初始化视频播放器

现在，您只需通过向构造函数传递一堆参数来初始化 Easy Video Player。这些参数控制视频播放器的所有方面，因此您应该阅读文档以了解它们各自的工作原理。在本教程中，我将简要概述我们将在自己的播放器中修改的选项。

这是您必须放入网页中以初始化播放器的代码。它可能看起来很长而且很复杂，但参数的名称一目了然，并且从一个播放器实例到另一个播放器实例它们将具有相同的值。大多数情况下，您将能够直接从文档中的示例中获取初始化参数并根据需要进行更改。

<script type="text/javascript">
FWDEVPUtils.onReady(function(){
	FWDEVPlayer.videoStartBehaviour = "pause";
	
	new FWDEVPlayer({		
		//main settings
		instanceName:"player1",
		parentId:"topVideo",
		mainFolderPath:"content",
		initializeOnlyWhenVisible:"no",
		skinPath:"minimal_skin_white",
		displayType:"responsive",
		fillEntireVideoScreen:"no",
		playsinline:"yes",
		autoScale:"yes",
		openDownloadLinkOnMobile:"no",
		useVectorIcons:"no",
		useResumeOnPlay:"no",
		goFullScreenOnButtonPlay:"no",
		useHEXColorsForSkin:"no",
		normalHEXButtonsColor:"#FF0000",
		selectedHEXButtonsColor:"#FFFFFF",
		privateVideoPassword:"428c841430ea18a70f7b06525d4b748a",
		startAtTime:"",
		stopAtTime:"",
		startAtVideoSource:2,
		videoSource:[
			{source:"content/videos/robin_sd.mp4", label:"small version"},
			{source:"content/videos/robin_hd.mp4", label:"hd720"},
			{source:"content/videos/robin_full_hd.mp4", label:"hd1080"}
		],
		posterPath:"content/posters/robin-poster.png",
		showErrorInfo:"yes",
		fillEntireScreenWithPoster:"yes",
		disableDoubleClickFullscreen:"no",
		addKeyboardSupport:"yes",
		usechromeless:"no",
		showPreloader:"yes",
		preloaderColors:["#999999", "#FFFFFF"],
		autoPlay:"no",
		enableAutoplayOnMobile:"no",
		loop:"no",
		scrubAtTimeAtFirstPlay:"00:00:00",
		maxWidth:980,
		maxHeight:552,
		volume:.8,
		//logo settings
		showLogo:"yes",
		hideLogoWithController:"yes",
		logoposition:"topRight",
		logoLink:"https://code.tutsplus.  com/",
		logoMargins:5,
		//controller settings
		showController:"yes",
		showDefaultControllerForVimeo:"no",
		showScrubberWhenControllerIsHidden:"yes",
		showControllerWhenVideoIsStopped:"yes",
		showVolumeScrubber:"yes",
		showVolumeButton:"yes",
		showTime:"yes",
		showRewindButton:"yes",
		showQualityButton:"yes",
		showSubtitleButton:"yes",
		showShareButton:"yes",
		showDownloadButton:"yes",
		showMainScrubberToolTipLabel:"yes",
		showChromecastButton:"no",
		showFullScreenButton:"yes",
		repeatBackground:"yes",
		controllerHeight:41,
		controllerHideDelay:3,
		startSpaceBetweenButtons:7,
		spaceBetweenButtons:9,
		mainScrubberOffestTop:14,
		scrubbersOffsetWidth:4,
		timeOffsetLeftWidth:5,
		timeOffsetRightWidth:3,
		volumeScrubberWidth:80,
		volumeScrubberOffsetRightWidth:0,
		timeColor:"#777777",
		youtubeQualityButtonNormalColor:"#777777",
		youtubeQualityButtonSelectedColor:"#FFFFFF",
		scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
		scrubbersToolTipLabelfontColor:"#5a5a5a",
		//redirect at video end
		redirectURL:"",
		redirectTarget:"_blank",
		//playback rate / speed
		showPlaybackRateButton:"yes",
		defaultPlaybackRate:"1", //0.25, 0.5, 1, 1.25, 1.5, 2
		//embed window
		embedWindowCloseButtonMargins:0,
		borderColor:"#333333",
		mainLabelsColor:"#FFFFFF",
		secondaryLabelsColor:"#a1a1a1",
		shareAndEmbedTextColor:"#5a5a5a",
		inputBackgroundColor:"#000000",
		inputColor:"#FFFFFF",
		//thumbnails preview
		thumbnailsPreview:"",
		thumbnailsPreviewWidth:196,
		thumbnailsPreviewHeight:110,
		thumbnailsPreviewBackgroundColor:"#000000",
		thumbnailsPreviewBorderColor:"#666",
		thumbnailsPreviewLabelBackgroundColor:"#666",
		thumbnailsPreviewLabelFontColor:"#FFF",
		// context menu
		showContextmenu:'yes',
		showScriptDeveloper:"yes",
		contextMenuBackgroundColor:"#1f1f1f",
		contextMenuBorderColor:"#1f1f1f",
		contextMenuSpacerColor:"#333",
		contextMenuItemNormalColor:"#888888",
		contextMenuItemSelectedColor:"#FFFFFF",
		contextMenuItemDisabledColor:"#444"
	});				
});
</script>

每次都必须唯一的两个参数是instanceName和parentId。该parentId参数是视频容器的 ID。该instanceName参数的值用于在调用诸如play().

该videoSource参数用于指定同一视频的不同版本的路径，以便用户可以以标清、高清或全高清格式播放。该posterPath参数指定在视频开始播放之前显示的图像文件的路径。

许多其他参数用于控制播放器中使用的不同 UI 元素的间距、颜色或背景。如果您现在在浏览器中加载网页，您应该会看到类似于下图的内容。

如何使用JavaScript的简易视频播放器 第3张

为您的视频添加注释

在许多情况下，您希望在观众观看视频时向他们提供一些额外的信息。在这种情况下，注释非常有用。幸运的是，Easy Video Player 提供了一种为视频添加注释的便捷方式。

您只需要使用一些带有特殊数据属性的 HTML。在我们的例子中，我们将使用注释告诉读者关于知更鸟的事实，然后如果他们想阅读更多关于这种鸟的信息，请链接到维基百科。这是您必须添加到网页的标记。最好将它添加到视频播放器容器的正下方。

<ul id="vidAnnotations" style="display:none">
	<li data-start-time="00:00:01" data-end-time="00:00:05" data-left="600" data-top="100" data-normal-state-class="EVPAnnotationNormal">
		<p>The robin was declared Britain’s National Bird on December 15th, 1960.</p>
	</li>
	
	<li data-start-time="00:00:15" data-end-time="00:00:20" data-left="40" data-top="400" data-show-close-button="yes" data-click-source="https://en.wikipedia.org/wiki/European_robin" data-click-source-target="_blank" data-normal-state-class="EVPAnnotationLinkNormal">
		<p>You can learn more about this bird on the Wikipedia page about <strong>European Robins</strong>.</p>
	</li>	
</ul>

将注释设置display为none将隐藏它们，使其不会出现在网页中。每个注释指定的属性将决定它们出现在视频中的时间和位置。data-top可以使用和指定注释与左侧和顶部的距离data-left attributes。和属性决定注释何时显示和消失data-start-time。data-end-time您还可以通过将data-show-close-button属性设置为 为用户提供手动关闭注释的选项true。您可以在下载时提供的文档中阅读所有其他属性。

请记住，注释不会在您将它们添加到网页后立即开始工作。目前，视频播放器不知道它们的存在。所以你必须在它的构造函数中指定几个参数来帮助它确定在哪里可以找到注解。

annotiationsListId:"vidAnnotations",
showAnnotationsPositionTool:"no",

如果有人现在播放视频，他们将在指定时间后看到注释，如下图所示。

如何使用JavaScript的简易视频播放器 第4张

最后的想法

在本教程中，我们创建了一个功能丰富、功能齐全的响应式视频播放器，它使用Easy Video Player脚本支持注释。

这只是使用插件的一种方式。该插件还提供了许多其他功能，增加了它的实用性。例如，该脚本允许您在视频中集成不同类型的广告，以帮助您通过内容获利。您还可以使用它在灯箱内播放视频。

文章目录
  • 为什么要使用简易视频播放器？
  • 我们将建造什么
  • 入门
  • 初始化视频播放器
  • 为您的视频添加注释
  • 最后的想法

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何使用JavaScript的简易视频播放器
    文章地址：https://www.weixiaolive.com/en/index.php/post/63.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云