關于的使用，大家應該是比較熟悉的，現在先展示一下效果，然後在慢慢解釋如何使用它們。
特點：
多個視訊選擇；
彈出模态框，不能上下滑動；
視訊自帶可全屏；
視訊自動播放；
相容IE，IE會有播放殘留，是以讓其重新整理頁面；
其他浏覽器：火狐，谷歌，edge，safari等；
ps:右上角可以運作代碼，并且可以全屏展示。
youku-video-embed
margin: 0;
padding: 0;
}
#mask{
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
background-color: #000;
z-index: 99;
}
#closeBtn{
float: right;
padding-right: 5px;
width: 14px;
height: 20px;
line-height: 20px;
}
#closeBtn a{
font-size: 18px;
font-weight: bold;
cursor: pointer;
color: #666;
}
#closeBtn a:hover{
color: #fff;
text-decoration: none;
}
#videoModal{
display: none;
position: fixed;
top: 10%;
left: 50%;
margin-left: -305px;
width: 610px;
height: 480px;
background-color: #000;
z-index: 100;
}
.wrapper{
margin: 0 auto;
width: 100%;
max-width: 1140px;
text-align: center;
}
h3{
margin-top: 20px;
color: #b403b7;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style-type: none;
margin: 10px 20px;
}
p{
font-size: 14px;
font-family: '微軟雅黑';
color: #999;
}
.wrapper button{
margin-top: 50px;
width: 200px;
height: 200px;
cursor: pointer;
border-radius: 8px;
color: #666;
}
.wrapper button:hover{
opacity: .8;
filter: alpha(opacity=80);
}
x
embed連結優酷視訊自動播放
-
視訊01
視訊簡介
視訊描述視訊描述視訊描述
-
視訊02
視訊簡介
視訊描述視訊描述視訊描述
-
視訊03
視訊簡介
視訊描述視訊描述視訊描述
-
視訊04
視訊簡介
視訊描述視訊描述視訊描述
var videoID='';
var videoSrc;
var videoModal = $("#videoModal");
var $targetEle = $("#videoList").find("li");
//點選視訊，判斷是否是button，排除其他内容
$targetEle.click(function(e) {
var dataItem = $(this).attr("data-item");
var $para1 = $(this).find("p")[0];
var $para2 = $(this).find("p")[1];
if(e.target == $para1 || e.target == $para2) {
return;
} else {
videoID = isWhichSrc(dataItem);
videoFunc(videoID);
return false;
}
});
//關閉
$("#closeBtn").click(function() {
videoModal.slideUp(600).find("embed").remove();
//相容IE，讓其重新整理頁面，對其他浏覽器無效
document.execCommand('Refresh');
hideMask();
return false;
});
//根據得到的data-item值判斷相對應的視訊ID
var isWhichSrc = function(num) {
if(num == 1) {
videoID = "XMjQ4MDg2MTc2MA";
}
if(num == 2) {
videoID = "XMTY0OTYzNTU0NA";
}
if(num == 3) {
videoID = "XMTQyMDExNjA4NA";
}
if(num == 4) {
videoID = "XMTc2MDAxOTIwOA";
}
return videoID;
}
//根據視訊ID指派視訊連結
function videoFunc(videoid) {
videoSrc = "http://player.youku.com/player.php/sid/"+videoid+"==/v.swf?VideoIDS="+videoid+"==&isAutoPlay=true&isShowRelatedVideo=false&showAd=0";
embedEle = "";
//将獲得的embed标簽添加進去
videoModal.append(embedEle);
$('#videoModal').slideDown(600);
showMask();
}
//遮罩層部分
function showMask() {
$("body").css("overflow","hidden");
$("#mask").css({"height":$(document).height(),"width":$(document).width()}).slideDown(600);
}
function hideMask() {
$("#mask").slideUp(600);
bodyShow();
}
function bodyShow() {
$("body").css("overflow","auto");
}
接下來咱們聊聊具體的使用：
首先，先看一下嵌入網頁中優酷視訊的完整代碼(直接從優酷分享得到的HTML代碼)：
embed
代碼中，的相關屬性：
src — 指向資源；
quality='high' — 視訊的預設清晰度，一般為high;
width,height — 視訊的寬、高度；
align='middle' — 視訊的位置；
allowFullScreen='true' — 是否運作全屏觀看，預設true;
type='application/x-shockwave-flash' — 各個浏覽器支援情況；
allowScriptAccess='always' — 特殊屬性，用于確定Flash影片可能特定于某個版本的Flash；
常用的基本屬性就這些了，不過，這個嵌入的視訊，預設是不自動播放，下面來看看自動播放的設定代碼：
embed
這些屬性一看就明白：
isAutoPlay=true — 是否自動播放；
isShowRelatedVideo=false — 是否展示相關視訊；
好了，embed的常用屬性介紹完畢，接下來咱們一起看看如何跟換視訊的連結：
第一步：由于是多個視訊展示，是以複制多個data-item值：
-
視訊01
視訊簡介
視訊描述視訊描述視訊描述
-
視訊02
視訊簡介
視訊描述視訊描述視訊描述
-
視訊03
視訊簡介
視訊描述視訊描述視訊描述
-
視訊04
視訊簡介
視訊描述視訊描述視訊描述
第二步：模态框設定，并且設定視訊關閉按鈕，(這裡沒有直接将embed的内容寫入在頁面上，防止有些浏覽器直接跳過js代碼；)
x
第三步：就是使用jquery擷取到點選事件，并判斷是否是需要點選的對象；
var embedEle;
var videoID='';
var videoSrc;
var videoModal = $("#videoModal");
var $targetEle = $("#videoList").find("li");
//點選視訊，判斷是否是button，排除其他内容
$targetEle.click(function(e) {
var dataItem = $(this).attr("data-item");
var $para1 = $(this).find("p")[0];
var $para2 = $(this).find("p")[1];
if(e.target == $para1 || e.target == $para2) {
return;
} else {
videoID = isWhichSrc(dataItem);
videoFunc(videoID);
return false;
}
});
1.根據data-item的值，擷取點選的data-item,并執行isWhichSrc(num)函數,并将擷取到的視訊連結指派給videoID = isWhichSrc(dataItem);
//根據得到的data-item值判斷相對應的視訊ID
var isWhichSrc = function(num) {
if(num == 1) {
videoID = "XMjQ4MDg2MTc2MA";
}
if(num == 2) {
videoID = "XMTY0OTYzNTU0NA";
}
if(num == 3) {
videoID = "XMTQyMDExNjA4NA";
}
if(num == 4) {
videoID = "XMTc2MDAxOTIwOA";
}
return videoID;
}
2.然後将此值傳入給videoFunc(videoid)；videoFunc(videoid)函數中，建立embed并添加到頁面上；
//根據視訊ID指派視訊連結
function videoFunc(videoid) {
videoSrc = "http://player.youku.com/player.php/sid/"+videoid+"==/v.swf?VideoIDS="+videoid+"==&isAutoPlay=true&isShowRelatedVideo=false&showAd=0";
embedEle = "";
//将獲得的embed标簽添加進去
videoModal.append(embedEle);
$('#videoModal').slideDown(600);
showMask();
}
最後就是關于遮罩層的函數：
function showMask() {
$("body").css("overflow","hidden");
$("#mask").css({"height":$(document).height(),"width":$(document).width()}).slideDown(600);
}
function hideMask() {
$("#mask").slideUp(600);
bodyShow();
}
function bodyShow() {
$("body").css("overflow","auto");
}
![html embed自動播放,html embed标簽怎麼用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)