很棒视频背景插件， HTML5和Youtube API YTPlayer

当前位置：首页 > 网页特效 > 其他 > 很棒视频背景插件， HTML5和Youtube API YTPlayer

很棒视频背景插件， HTML5和Youtube API YTPlayer

源码大小：10.55MB
所需积分：1积分
源码编号：19JP-3554
浏览次数：243次
最后更新：2023年06月26日
所属栏目：其他

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

YTPlayer是一个jQuery插件，允许您使用html5将youtube视频作为网页的背景数据-*属性和youtube API。

您也可以将此插件用作网页的普通视频播放器（支持播放列表）

参见：

jQuery的全屏背景视频插件-BigVideo

安装：

# NPM
$ npm install jquery.mb.ytplayer

# Bower
$ bower install jquery.mb.ytplayer

基本用法：

1.在页面上包含jQuery框架和jQuery？YTPlayer

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.mb.YTPlayer.min.js"></script>

2.包含jQuery YTPlayer CSS来为您的播放器设置样式

<link href="/path/to/dist/css/jquery.mb.YTPlayer.min.css" rel="stylesheet" />

3.调用插件，我们就可以开始了。

jQuery(function(){
  jQuery(".player").YTPlayer();
});

4.初始化YTPlayer作为背景。您可以使用数据属性属性：

<a class="player" 
   data-property="{videoURL:'YW2Aa4CJEgY',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">
   My video
</a>

5.将插件初始化为一个简单的Youtube播放器。

<a class="player" 
   data-property="{videoURL:'YW2Aa4CJEgY',containment:'self',autoPlay:true, mute:true, startAt:0,opacity:1}">
   My video
</a>

6.您也可以使用YT播放列表方法。

// videos: an array of video objects
// shuffle: set to true you can have a random sequence of videos
// callback: callback function
var videos = [
    {videoURL:"VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
    {videoURL: "VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
    {videoURL: "VIDEO ID or VIDEO URL here",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
];
jQuery(".player").YTPlaylist(videos, false, function(video){
  jQuery("#videoID").html(video.videoData.id);
  jQuery("#videoTitle").html(video.videoData.title);
  jQuery("#videoDesc").html(video.videoData.description);
});

7.自定义播放器的所有可能选项。这些选项也可以通过数据-*属性。

jQuery(".player").YTPlayer({
  /**
   videoURL (string)
   the complete Youtube video URL or the short url or the videoID
   */
  videoURL: null,

  /**
   containment (string)
   default containment for the player
   */
  containment: 'body',

  /**
   ratio (string or number)
   "auto", "16/9", "4/3" or number: 4/3, 16/9
   */
  ratio: 'auto',

  /**
   fadeOnStartTime (int)
   fade in timing at video start
   */
  fadeOnStartTime: 1000,

  /**
   startAt (int)
   start second
   */
  startAt: 0,

  /**
   stopAt (int)
   stop second
   */
  stopAt: 0,

  /**
   autoPlay (bool)
   on page load video should start or pause
   */
  autoPlay: true,

  /**
   coverImage (string)
   The path to the image to be used as cover if the autoPlay option is set to false
   */
  coverImage: false,

  /**
   loop (bool or int)
   video should loop or not; if number it will loop for the specified times
   */
  loop: true,

  /**
   addRaster (bool)
   shows a raster image over the video (added via CSS)
   You can change the raster image via CSS:
   .YTPOverlay.raster { background: url(images/raster.png)}
   */
  addRaster: false,

  /**
   mask (bool or object) the key is the second and the value is the path to the image
   Ex: mask:{ 0:'assets/mask-1.png', 5:'assets/mask-2.png', 30: false, 50:'assets/mask-3.png'}
   */
  mask: false,

  /**
   opacity (int)
   0 to 1
   */
  opacity: 1,

  /**
   quality (string)
   @deprecated

   setPlaybackQuality has been deprecated on the YT API and doesn't work anymore
   âsmallâ, âmediumâ, âlargeâ, âhd720â, âhd1080â, âhighresâ, "default"
   */
  quality: 'default',

  /**
   vol (int)
   0 to 100
   */
  vol: 50,

  /**
   mute (bool)
   mute the video at start
   */
  mute: false,

  /**
   showControls (bool)
   shows the control bar at the bottom of the containment
   */
  showControls: true,

  /**
   anchor (string)
   center,top,bottom,left,right combined in pair
   */
  anchor: 'center,center',

  /**
   showAnnotations (bool)
   display the annotations on video
   */
  showAnnotations: false,

  /**
   cc_load_policy (bool)
   display the subtitles
   */
  cc_load_policy: false,

  /**
   showYTLogo (bool)
   display the Youtube logotype inside the button bar
   */
  showYTLogo: true,

  /**
   useOnMobile (bool)
   activate the player also on mobile
   */
  useOnMobile: true,

  /**
   playOnlyIfVisible (bool)
   play the video only if the containment is on screen
   */
  playOnlyIfVisible: false,

  /**
   onScreenPercentage (bool)
   percentage of the player height the video should stop or start when visible
   */
  onScreenPercentage: 30,

  /**
   * goFullScreenOnPlay (bool)
   * if the player containment is set to "self" this allow the video to go fullscreen when played
   */
  goFullScreenOnPlay: false,

  /**
   stopMovieOnBlur (bool)
   stop the video if the window loose the focus
   */
  stopMovieOnBlur: true,

  /**
   realfullscreen (bool)
   the video when in full screen covers all the display
   */
  realFullscreen: true,

  /**
   optimizeDisplay (bool)
   The video always fit the containment without displaying the black strips
   */
  optimizeDisplay: true,

  /**
   abundance (bool)
   the abudance of the video size
   */
  abundance: 0.3,

  /**
   gaTrack (bool)
   track the video plays on GA
   */
  gaTrack: true,

  /**
   remember_last_time (bool)
   when the page is reloaded the video will start from the last position
   */
  remember_last_time: false,

  /**
   addFilters (bool or string)
   add one or more CSS filters as object to the video
   Ex: {sepia: 50, hue_rotate : 220}
   */
  addFilters: false,

  /**
   useNoCookie (bool)
   use https://www.youtube-nocookie.com host to serve the video
   */
  useNoCookie: true,

  /**
   onReady (function)
   a callback function fired once the player is ready
   */
  onReady: function (player) {
  },

  /**
   onReady (function)
   a callback function fired if there's an error
   */
  onError: function (player, err) {
  },

  /**
   onEnd (function)
   a callback function fired when the video ends
   */
  onEnd: function () {
  }
});

8.更多API方法。

// change the video of the specified player
jQuery(".player").YTPChangeMovie(opt);

// play the video
jQuery(".player").YTPPlay();

// pause the video
jQuery(".player").YTPPause();

// stop the video
jQuery(".player").YTPStop();

// seek to 20s
jQuery('#[playerID]').YTPSeekTo(20);

// Manage video speed
jQuery(".player").YTPSetPlaybackRate()
jQuery(".player").YTPGetPlaybackRate()

// switch video from background to front
jQuery(".player").YTPFullscreen();

// change the video volume
jQuery(".player").YTPSetVolume(val);

// mute the audio
jQuery(".player").YTPMute();

// unmute the audio
jQuery(".player").YTPUnmute();

// switch from mute to unmute
jQuery(".player").YTPToggleVolume();

// retrive the original player returned by the YouTube API
jQuery(".player").YTPGetPlayer();

// return the info data of the current video as JSON.
jQuery(".player").YTPGetVideoData();

// available only if you are playing a video list; 
// goes to the next video in the play list.
jQuery(".player").YTPPlayNext();

// available only if you are playing a video list; 
// goes to the previous video in the play list.
jQuery(".player").YTPPlayPrev();

// available only if you are playing a video list; goes to a specific video in the play list based on the index.
jQuery(".player").YTPPlayIndex(idx);

// return the actual video time.
jQuery(".player").YTPGetTime();

// return the total video time.
jQuery(".player").YTPGetTotalTime();

// return the actual anchor point for the video.
jQuery(".player").YTPGetAnchor();

// define how the video will behave once the window is resized
// possible value are: âtop,bottom,left,right,centerâ
// it accepts a pair of value comma separated (ex: âtop,rightâ or âbottom,leftâ)
jQuery(".player").YTPSetAnchor(posX,posY);

// apply a CSS filter to the player:
// grayscale : 1-100,
// hue_rotate: 1-360,
// invert : 1-100,
// opacity : 1-100,
// saturate : 1-400,
// sepia : 1-100,
// brightness: 1-400,
// contrast : 1-400,
// blur : 1-100
jQuery(".player").YTPApplyFilter('sepia', 50);

// apply multiple CSS filters to the player
jQuery(".player").YTPApplyFilters(filters);

// toggle the filter from the passed value to 0 and vice-versa
jQuery(".player").YTPtoggleFilter(filter, value);

// toggle all the filters
jQuery(".player").YTPToggleFilters(callback);

// remove a filter
jQuery(".player").YTPRemoveFilter(filter, callback);

// disable all filters
jQuery(".player").YTPDisableFilters();

// enable filters
jQuery(".player").YTPEnableFilters();

// add a mask to the target video player
jQuery(".player").YTPAddMask("path/to/mask.jpg");

// remove the mask
jQuery(".player").YTPRemoveMask();

// toggle the mask
jQuery(".player").YTPToggleMask();

// Change the cover image
jQuery(".player").changeCoverImage(img);

9.活动主持人。

// properties:
videoData.id
videoData.channelTitle
videoData.title
videoData.description
videoData.thumb_max
videoData.thumb_high
videoData.thumb_medium

jQuery(".player").on("YTPUnstarted",function(e){
  // do something here
});

jQuery(".player").on("YTPBuffering",function(e){
  // do something here
});

jQuery(".player").on("YTPReady",function(e){
  // do something here
});

jQuery(".player").on("YTPStart",function(e){
  // do something here
});

jQuery(".player").on("YTPPlay",function(e){
  // do something here
});

jQuery(".player").on("YTPPause",function(e){
  // do something here
});

jQuery(".player").on("YTPEnd",function(e){
  // do something here
});

jQuery(".player").on("YTPFullScreenStart",function(e){
  // do something here
});

jQuery(".player").on("YTPFullScreenEnd",function(e){
  // do something here
});

jQuery(".player").on("YTPMuted",function(e){
  // do something here
});

jQuery(".player").on("YTPUnmuted",function(e){
  // do something here
});

jQuery(".player").on("YTPTime",function(e){
  // do something here
});

jQuery(".player").on("YTPData",function(e){
  // do something here
});

更新日志：

v3.3.9稳定（2022-05-29）

将jQuery.browser重命名为jQuery.mbBrowser，以防止Wordpress中出现不推荐使用的警报
更新的程序包

v3.3.8稳定（2021-01-10）

引入了“noCookie”作为选项。默认情况下设置为true

第3.3.7版（2020-12-04）

mb.YTPlayer现在正在使用youtube-nocookie.com提供视频。
功能：如果视频设置为“自动播放”且未静音，则不会在第一次用户交互之前暂停，而是开始静音，并在第一次交互时打开音频。

第3.3.6版（2020-11-27年）

Bugfix：随着最新的macOS Big Sur系统更新，用户代理已被更改，Safari上的操作系统检测失败，导致阻塞错误。

第3.3.5版（2020-11-11）

错误修复程序

第3.3.4版（2020-11-01）

新功能：如果你将播放器设置为内联（通过短代码编辑器），你现在可以激活“全屏播放”功能。
错误修复：内联播放器“播放”图标无法正常工作。
添加一个选项以在不处于自动播放时开始全屏播放视频
删除了“quality”参数，因为它已被弃用，Youtube API也不再使用

第3.3.3版（2020-06-07）

使用YT API密钥错误修复程序获取数据

第3.3.2版（2020-05-21）

删除了isTouchSupported功能重复

第3.3.1版（2020-04-17）

添加了一种更改封面图像的新方法：jQuery.fn.changeCoverImage

第3.3.1版（2020-04-10）

优化Chrome手机的方向更改显示

第3.3.1版（2020-03-18）

重新构建

第3.3.1版（2020-01-13）

错误的视频ID无休止循环错误修复
错误修复：如果设置了错误的视频ID，则会出现无休止的循环

版本3.2.11（2019-12-16）

增加了两种管理视频速度的方法：jQuery.fn.YTPGetPlaybackRate和jQuery.fn.YTPSetPlaybackRate

版本3.2.10（2019-06-21）

错误修复：YTPlayer容器背景图像已被插件删除

第3.2.9版（2019-02-25）

修复了阻止优化显示正确设置锚点的问题

第3.2.8版（2018-12-03）

更好地优化显示管理

第3.2.7版（2018年10月10日）

静音不再工作

第3.2.6版（2018-10-05）

修复了由于新的自动播放策略而导致的Safari冻结错误。

第3.2.5版（2018年9月24日）

处理背景图像错误
已修复：由于YTPGetPlayer（）方法中引入的一个错误，YTPlaylist方法无法按方面工作。

第3.2.5版（2018-09-07）

Bug修复

第3.2.4版（2018-07-13）

错误修复：一旦结束，第一个YTPPlay事件就没有启动
在暂停时为在线播放器添加了一个播放按钮。
将jQuery.browser方法名称更改为jQuery.mbBrowser以防止冲突。
如果音频处于活动状态且浏览器为Chrome，则更改了自动播放行为

第3.2.3版（2018-06-21）

版本v3.2.3稳定
文档更新

版本3.2.2（2018-06-20）

版本v3.2.2稳定

v3.2.1（2018年5月30日）

版本v3.2.1稳定版
修复了选项（javascript参数）和属性（html属性）的统一处理
已将注释添加到选项
正在处理playOnlyOfVisible属性
错误修复：重新定义交叉视频的选项
错误修复：如果有多个玩家，则选项不一致
错误修复：封面图像显示不正确

v3.1.13（2018年4月07日）

添加“cc_load_policy”以激活字幕
将属性名称从“backgroundImage”更改为“coverImage”
错误修复：封面图像路径
正在处理：playOnlyIfVisible

v3.1.12（2018年1月31日）

版本v3.1.12稳定

v3.1.11（2018年1月28日）

版本v3.1.11稳定
错误修复：选项被上次初始化的播放器覆盖

v3.1.9（2018年1月24日）

错误修复：如果占位符是目标视频，则不会显示
错误修复：修复了一个错误，该错误在选中“记住最后一个视频时间位置”时阻止了正确的行为。
修复一个错误，如果页面上初始化了多个播放器，则属性是最后初始化的播放器的属性

v3.1.8（2018年1月19日）

版本v3.1.8稳定版

v3.1.6（2018年1月17日）

版本v3.1.6稳定版

v3.1.5（2018年1月16日）

optimizeADisplay函数将“丰度”计算为iframe高度的百分比，而不是固定值
代码重构并开始处理播放列表兼容性
改进：从选项中轻松应用过滤器
演示页面的布局更改

第3.1.2版（2017-11-17）

添加了playOnlyOfVisible选项，使视频仅在屏幕上播放
更好的视频启动性能
错误修复：在Android设备上，“playsInline”属性测试返回错误，阻止视频播放器运行

v3.1.1（2017年10月08日）

修复了一个阻止控件按方面工作的可怕错误
错误修复：控件不再工作
针对移动兼容性的各种修复程序
演示和playOnlyIfVisible的各种更新

v3.1.0（2017年9月27日）

致力于移动兼容性
检查视频元素的“playsInline”属性以管理移动背景视频（如果允许）
修正了在线播放器的海报图像分辨率

3.0.20版（2017年8月19日）

iOs修复
YTPlayer.start_from_last：将cookie时间设置为0以在会话关闭时清除cookie
致力于移动兼容性

版本3.0.19（2017-05-12）

移动修复操作系统检测

3.0.18版（2017-05-11）

各种修复

3.0.17版（2017-05-06）

各种修复

3.0.16版（2017年4月26日）

各种修复

3.0.15版（2017年4月24日）

各种修复

版本3.0.14（2017年4月19日）

各种修复

3.0.12版（2017-04-05）

停止事件比实际事件早0.5秒（之前是1.5秒）

版本3.0.12（2017-03-02）

各种修复

3.0.11版（2017年2月22日）

各种修复

版本3.0.10（2017-01-08）

各种修复

3.0.8版（2016年7月26日）

各种修复

3.0.6版（2016-07-07）

各种修复
添加了YTPPlayIndex方法，使用YTPPlaylist在播放列表中播放特定视频
jQuery 3.0.0的更新和修复

v3.0.3（2016年6月10日）

各种修复
添加了几种获取视频状态的新方法

3.0.1版（2016年5月20日）

研究过滤器方法

v3.0.0（2016年3月27日）

各种修复

v2.9.5版本（2016-03-11）

添加了掩码方法和演示页面

v2.9.13（2016年2月6日）

小错误修复

v2.9.11（2016年1月21日）

小错误修复

v2.9.10版本（2016-01-09）

小错误修复

v2.9.9版本（2016-01-07）

正在进行加速st启动

v2.9.8版本（2015-12-08）

新功能：在播放列表中循环播放视频

v2.9.5版本（2015年10月25日）

下拉操作事件的错误修复

v2.9.4版本（2015-10-08）

更新+各种修复

v2.9.3版本（2015-06-28）

更新+各种修复
对：getDataFromAPI方法的更改

v2.9.0版本（2015-05-09）

视频数据更新到YT API 3。-将apikey设置为private（在包中不可用）
更好地控制以检查视频是否已准备好播放

2015-04-26

v2.8.5版本

2015-04-23

各种代码重构器

2015-04-21

添加的模糊过滤器

2015-04-20

添加了音量控制和过滤器

v2.8.0版本（2015-01-31）

各种修复

v2.7.9版本（2015-01-12）

各种修复

v2.7.8版本（2014-12-14）

各种变化

v2.7.5版本（2014-11-16）

各种修复

v2.7.2版本（2014-08-23）

各种修复

v2.7.0版本（2014-08-19）

重大更新，

v2.6.9版本（2014-06-23）

静音/取消静音错误修复

v2.6.8版本（2014-06-23）

各种修复

v2.6.7版本（2014-05-13）

各种修复

v2.6.6版本（2014-03-31）

各种修复

v2.6.3版本（2014-03-19）

各种修复

v2.6.2版本（2014-01-28）

各种修复

v2.6.0版本（2013-11-24）

已更新到最新版本

v2.5.9版本（2013-11-21）

已更新到最新版本

v2.5.8版本（2013-11-13）

各种修复

v2.5.7版本（2013-08-31）

添加了真正的全屏
各种修复

v2.5.4版本（2013-05-31）

修复了IE中阻止changeMovie工作的错误

v2.5.2版本（2013-05-31）

各种修复

预览截图

很棒视频背景插件， HTML5和Youtube API YTPlayer

相关热词： YTPlayer Youtube HTML5 插件背景视频很棒

上一篇：用户友好谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：多语言简单科学计算器插件

开发前端软件素材源码教程下载网站