srcmini本文概述
以前, 我们与你分享了5个最好的jQuery插件, 以在你的网站中添加视频作为背景。这些插件允许你嵌入来自自己的服务器(或外部服务器)的视频, 只要它们以mp4, ogg, wav等格式提供即可。但是, 如果你不想托管视频而是使用YouTube之类的服务怎么办为了它 ？当然, 上面提到的插件不是你的选择。
幸运的是, 你可以开始使用另一个插件来将YouTube托管的视频用作网站的背景, 我们正在谈论jquery.mb.YTPlayer插件。
1.下载并包含jquery.mb.YTPlayer
要从YouTube添加视频作为网站背景的第一件事是下载jquery.mb.YTPlayer插件。这个开源jQuery组件可让你轻松构建自定义的Youtube播放器, 或将任何Youtube视频用作页面的背景。你基本上需要3个文件：
- jQuery(显然, 这是一个jQuery插件)
- YTPlayer.css(视频背景的基本样式)
- jquery.mb.YTPlayer.js(插件文件)
你可以从Github的项目版本(zip文件)中获取插件的2个文件(或从存储库的dist文件夹中从浏览器下载文件)。下载文件后, 只需使用文档中的脚本和链接标签将它们作为引用包含在内：
重要
与其他插件一样, 该插件也要求从服务器(http或https协议)提供HTML文档。从file：//协议访问插件将使该插件不可用。
<!-- Include Styles of the background player -->
<link href="YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="jquery.mb.YTPlayer.js"></script>包含文件后, 你将可以轻松使用该插件。有关此插件的更多信息, 请在此处访问Github的官方存储库或阅读文档。
2.使用插件
该插件非常易于使用, 因此, 你的唯一问题就是基本上知道要使用哪个视频。需要在抽象DOM元素上初始化插件。所谓抽象, 是指该元素在理论上对用户不可见, 因为它像背景视频的”隐形控制器”一样播放, 因此该元素将使用初始化和其他方法(例如播放, 暂停)视频不会在此元素上播放：
<!-- Video Abstract Controller -->
<div id="controller"></div>
<!-- if you want it inside a custom element -->
<div id="video-container" style="width: 640px;height: 480px;"></div>
<script>
$("#controller").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ', // use "body" for the entire screen
// or a selector for a custom element
containment: "#video-container"
// for more initialization options, // please read the docs
});
</script>为了确定视频应显示在哪里, 在初始化过程中, 参数对象需要一个选项, 即容器, 你应在其中提供DOM选择器(元素ID或类), 因此, 如果希望它以全屏显示, 则应使用body作为容器。插件有许多初始化选项, 因此你可能想在初始化区域的文档中阅读你感兴趣的内容。
全屏示例
以下文档显示了如何将YouTube视频用作整个页面的背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Styles of the player -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define the control element of the youtube video. This element is abstract and
is only to, as mentioned, to control the video. When you want to make changes to
the player, cast the functions of YTPlayer in this element
-->
<div id="player-control"></div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ', // If you want it as background of your website
// or of an element e.g #elementId
containment: "body", autoplay: true, mute: true, startAt: 0, opacity: 1, // Hide YouTube Controls
showControls: false, onReady: function(){
console.log("Player succesfully initialized");
}, onError: function(err){
console.log("An error ocurred", err);
}
});
});
</script>
</body>
</html>自定义DOM元素示例
以下示例显示了如何将YouTube视频设置为文档的自定义元素的背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Styles of the player -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<style>
/* Define some dimensions to the container where the video will appear */
#dom-element {
width: 600px;
height: 400px;
position: relative;
top: 0;
left: 0;
z-index: 0;
background-size: cover;
}
</style>
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define the control element of the youtube video. This element is abstract and
is only to, as mentioned, to control the video. When you want to make changes to
the player, cast the functions of YTPlayer in this element.
-->
<div id="player-control"></div>
<!-- The Video will appear in this element -->
<div id="dom-element"></div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ', // As we want it as background of a custom element, we'll use
// the ID of the custom element
containment: "#dom-element", autoplay: true, mute: true, startAt: 0, opacity: 1, // Hide YouTube Controls
showControls: false, onReady: function(){
console.log("Player succesfully initialized");
}, onError: function(err){
console.log("An error ocurred", err);
}
});
});
</script>
</body>
</html>编码愉快！
评论前必须登录！
注册