如何将Easy Video Player用于JavaScript

最新推荐文章于 2024-07-11 18:46:21 发布
最新推荐文章于 2024-07-11 18:46:21 发布
阅读量713 收藏 1
点赞数
文章标签： python java html linux javascript ViewUI
本文教程介绍了如何使用Easy Video Player JavaScript库创建一个功能丰富的响应式视频播放器，支持视频质量切换、播放速度控制、字幕和注释。通过这个库，你可以轻松地在网页中添加视频，实现类似于YouTube的功能，如响应式布局、多质量选项、自定义广告和安全保护。教程详细说明了从设置到添加注释的整个过程。
摘要由CSDN通过智能技术生成

如果您想让更多的人谈论和了解您的业务，那么现在是时候认真对待视频了。 在本教程中，我将帮助您立即开始使用CodeCanyon中的Easy Video Player脚本的逐步指南。 您可以使用此JavaScript库将视频添加到您的网页。

为什么要使用Easy Video Player？

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

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

它支持多种视频质量，因此用户可以像YouTube一样在视频的SD，HD和Full HD版本之间切换。 您还可以在运行时控制视频的播放速度。 也可以在单个视频中添加多种语言的字幕。 然后，用户可以选择要在运行时显示的字幕。

如果要允许观看者下载视频，则可以在全局或单个视频上显示可选的下载按钮。

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

您可以使用片头广告，片中广告或片后广告通过这些视频获利。 也可以将弹出广告添加到视频中，并控制其显示和隐藏时间。 Easy Video Player允许您在用户暂停视频时显示广告。

为了确保用户仅通过爬网页面源就不会窃取视频，可以对视频路径进行加密。 您也可以通过密码保护视频，以限制对特定用户的访问。

功能列表不止于此。 我的建议是您访问脚本描述页面，以了解Easy Video Player的所有功能。

我们将要建设的

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

视频播放器决赛

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

入门

在阅读Easy Video Player附带的众多功能之后，您可能会认为很难配置或使用它。 但是，正如您将在本教程中看到的那样，使用脚本启动和运行并不复杂。

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

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

第一步是将CSS和JavaScript文件包含在您的网页中。 

<!DOCTYPE html>
<html lang="en">
  <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 ，该ID传递给Easy Video Player的构造函数。 您可以将此divCSS属性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。 调用play()类的方法时， instanceName参数的值用于标识播放器。

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

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

视频播放器用户界面

在视频中添加注释

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

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

<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",

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

Video Player批注

最后的想法

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

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

翻译自: https://code.tutsplus.com/tutorials/how-to-use-easy-video-player-for-javascript--cms-33898

cunjie3951
关注
EasyPlayer.js网页全终端播放器安装使用文档
weixin_30622181的博客
01-30 3335
EasyPlayer.js 集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大 属性(Property) video-url 视频流地址 String default ‘’ video-title 视频右上角显示的标题 String default ‘’ poster 视频封面图片 S...
EasyPlayer-element.min.js
07-21
使用EasyPlay制作web播放器的时候使用。
EasyPlayer.js 在VUE中使用
05-22
EasyPlayer.js 在VUE中使用 https://blog.csdn.net/u012848709/article/details/106291133
EasyPlayer.js：打造简洁高效的HTML5视频播放器
gitblog_00012的博客
03-25 2441
EasyPlayer.js：打造简洁高效的HTML5视频播放器 项目地址:https://gitcode.com/tsingsee/EasyPlayer.js EasyPlayer.js 是一个轻量级、高度可定制的HTML5视频播放器框架，由Tsingsee团队开发并维护。该项目旨在简化HTML5视频播放器的开发过程，让开发者能够快速构建功能丰富的自定义播放器，适用于各种网站和应用。 项目简介 E...
uniapp项目h5中使用EasyPlayer
最新发布
2303_76798990的博客
07-11 873
EasyPlayer流媒体播放器，可支持多种流媒体协议播放，可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持WebSocket-FLV、HTTP-FLV，HLS（m3u8）、WebRTC等格式的视频流，并且已实现网页端实时录像、在iOS上实现低延时直播等功能。uniapp使用EasyPlayer 提示Uncaught ReferenceError: videojs is not defined问题。
EasyPlayer.js 6.0全新发布，支持MSE、WebCodec、WASM多种解码模式，支持H.264/H.265/AAC/G711/MP3多种编码格式，支持录音、抓图、录像等各种控制，免费！
Babosa的专栏
06-19 2789
EasyPlayer系列已经持续迭代发布10年了！EasyPlayer.js是一款纯Web（H5）的直播流、点播流播放器。兼容几乎所有Web传输协议格式以及主流的音视频编码格式。具有低延时、高性能、兼容性强等特点。
MPV-EASY-Player：MPV-EASY播放器-基于mpv的电影播放器
02-03
MPV-EASY Player虽然需要安装，但实际上它是一个不折不扣的绿色软件（便携式应用），所谓的“安装”其实只是解压缩而已，所以重装系统后无需重新安装仍旧可以立即运行使用，最多只需要重新关联文件格式而已。...
easy-html5-player:一个简单HTML5网络播放器
05-07
在实际应用中，开发者可以将"easy-html5-player"作为一个基础模板，根据需求修改JavaScript代码和CSS样式，以适应不同网站的设计风格和功能需求。此外，通过查看源码，开发者可以学习到如何利用HTML5媒体API和...
easy_play_智能点播器_play3333.com_easy_easyplay_源码.zip
10-18
此外，可能会使用到开源的视频播放库，如 Video.js 或 JW Player。 4. **流媒体协议**：如 HLS (HTTP Live Streaming) 或 DASH (Dynamic Adaptive Streaming over HTTP)，用于将视频内容分割成小片段并以适应网络...
Easyplayer实现H5页面无插件播放视频，动态实时生成封面。
05-15
`Easyplayer` 是一个专门用于H5页面的轻量级视频播放器，它无需任何浏览器插件，支持多种视频格式，并且能够实现动态实时生成封面功能，为用户提供更加流畅、便捷的视频观看体验。下面我们将详细探讨`Easyplayer`的...
EasyPlayer.js:EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTPRTMPHTTP-FLVHLS(m3u8) live streaming & vod strea
05-10
EasyPlayer.js 简介 EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。 功能说明 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 H265 播放; 支持直播和点播播放; 支持全屏显示; 支持重连播放； 集成使用示例 普通集成 1.引入 copy EasyWasmPlayer.js 到项目中 copy libDecoder.wasm到项目或者www的根目录（一定要根目录） 2.在 html 中引用 EasyWasmPlayer.js <!DOCTYPE html> <html l
video-js 播放器demo
06-01
video js代码 ，加入视频即可播放。 一个html5的播放器。 在ie9以下会自动转flash播放。
EasyPlayer-RTSP
08-04
Android端支持全屏播放，声音开关，视频截图，视屏录制等功能
easy-video-player:轻松地在Android上播放视频，并将其包装在库存的MediaPlayer API中
05-21
简易视频播放器 Easy Video Player是一个简单但功能强大的视图，您可以将其插入应用程序以快速使视频播放正常工作。 特征 基于库存的MediaPlayer API。 它可以在所有设备和所有CPU上运行，并且可以与本地和远程源一起使用。 简单的。 与替代选项相比，启动和运行所需的代码少得多。 非常可配置。 有很多选项可以使播放器完全按照您希望的方式运行。 适应性强。 播放器会自动使用（AppCompat）活动主题的颜色。 您可以下载 。 Gradle依赖 Gradle依赖项可通过。 jCenter是Android Studio使用的默认Maven存储库。 相依性 将此添加到模块的build.gradle文件中： dependencies { // ... other dependencies compile ' com.afollestad:easy
探索EasyPlayer.js：强大的HTML5视频播放器解决方案
gitblog_00097的博客
03-25 1256
探索EasyPlayer.js：强大的HTML5视频播放器解决方案 项目地址:https://gitcode.com/EasyDSS/EasyPlayer.js EasyPlayer.js 是一个轻量级、高度可定制的HTML5视频播放器，它为开发者提供了一套简洁的API和丰富的配置选项，以满足各种复杂的视频播放需求。这篇文章将带你深入了解这个项目的技术特性，应用场景及其优势。 项目简介 EasyP...
使用EasyNVR接口和easy-player播放器插件实现web网页播放
音视频流媒体技术
01-03 3275
1.背景需求 很多客户在使用EasyNVR时，不喜欢产品化的界面，有时可能满足不了日常观看使用的需求。因此软件提供丰富的http接口，供第三方平台调用集成。但是有时客户这边可能没有专业的团队进行二次开发，这样一来就无法使用软件提供这么优秀的环境，实属可惜。 2.解决方案 这里可以通过很多种方法调取软件提供的接口，只要支持http协议都可以。这里我通过jQuery插件调取接口实现在web播放功...
使用EasyPlayer.js，通过设置解码器参数实现H.265音频解码
EasyDarwin开源社区技术博客
08-22 661
EasyPlayer具备多个版本，例如EasyPlayer-RTSP、EasyPlayer.js和EasyPlayerPro，以满足不同用户在不同场景下的需求。EasyPlayer不仅支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放，而且还支持本地文件播放，支持本地抓拍、本地录像等多种视频功能特性。1）在播放器的入口参数中添加一个名为sampleRate的参数，默认值为0，表示采用正常的解析流程。根据用户反馈，在使用EasyPlayer.js时遇到音频解析异常的问题。
H.265流媒体播放器EasyPlayer.js属性、方法和事件的综合概述
EasyDarwin开源社区技术博客
08-22 1130
EasyPlayer具备多个版本，例如EasyPlayer-RTSP、EasyPlayer.js和EasyPlayerPro，以满足不同用户在不同场景下的需求。此外，EasyPlayer还提供了Windows、Android和iOS版本，同时EasyPlayer.js还可以在Linux平台上使用。EasyPlayer播放器系列具备灵活的功能控制、低延迟和高稳定性，在多个项目场景中已经得到广泛应用。此外，该播放器还支持大码率视频直播（注意：H.265编码格式不支持大码率视频直播）。
unity videoplayer 是否支持流媒体
07-27
通过创建Media Player对象并给Display uGui指定Media Player组件，可以使用Unity自带的VideoPlayer或者一些第三方插件如AVPro、EasyMovieTexture等来播放流媒体。其中，Unity自带的VideoPlayer支持的格式较少，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值