<embed>鏈接優(yōu)酷視頻并設(shè)置自動播放

昵稱38670023 2017-01-24

展開全文

DOCTYPE html>

<head>

<title>youku-video-embedtitle>

head>

* {

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;

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

```

接下來咱們聊聊具體的使用：

首先,，先看一下嵌入網(wǎng)頁中優(yōu)酷視頻的完整代碼（直接從優(yōu)酷分享得到的HTML代碼）：

: 1
2
3
4
5
6
7
8
9
10
11
DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www./1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>embedtitle>
head>
<body>
<embed src='http://player.youku.com/player.php/sid/XMjQ4MDg2MTc2MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'>embed>
body>
html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

代碼中，

的相關(guān)屬性：

src --- 指向資源,；
quality='high' --- 視頻的默認清晰度,，一般為high;
width,height --- 視頻的寬、高度,；
align='middle' --- 視頻的位置,；
allowFullScreen='true' --- 是否運行全屏觀看，默認true;
type='application/x-shockwave-flash' --- 各個瀏覽器支持情況,；
allowScriptAccess='always' --- 特殊屬性,，用于確保Flash影片可能特定于某個版本的Flash；

常用的基本屬性就這些了,，不過,，這個嵌入的視頻，默認是不自動播放,，下面來看看自動播放的設(shè)置代碼：

: 1
2
3
4
5
6
7
8
9
10
11
DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www./1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>embedtitle>
head>
<body>
<embed src='http://player.youku.com/player.php/sid/XMjQ4MDg2MTc2MA==/v.swf?VideoIDS=XMjQ4MDg2MTc2MA==&isAutoPlay=true&isShowRelatedVideo=false&showAd=0' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'>embed>
body>
html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

這些屬性一看就明白：

isAutoPlay=true --- 是否自動播放,；
isShowRelatedVideo=false --- 是否展示相關(guān)視頻；

好了,，embed的常用屬性介紹完畢,，接下來咱們一起看看如何跟換視頻的鏈接：
第一步：由于是多個視頻展示，所以復(fù)制多個data-item值：

: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id='videoList'>
        <li data-item='1'>
            <button type='button' name='video01'>視頻01button>
            <p>視頻簡介p>
            <p>視頻描述視頻描述視頻描述p>
        li>
        <li data-item='2'>
            <button type='button' name='video02'>視頻02button>
            <p>視頻簡介p>
            <p>視頻描述視頻描述視頻描述p>li>
        <li data-item='3'>
            <button type='button' name='video03'>視頻03button>
            <p>視頻簡介p>
            <p>視頻描述視頻描述視頻描述p>li>
        <li data-item='4'>
            <button type='button' name='video04'>視頻04button>
            <p>視頻簡介p>
            <p>視頻描述視頻描述視頻描述p>li>
    ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

第二步：模態(tài)框設(shè)置,，并且設(shè)置視頻關(guān)閉按鈕,，（這里沒有直接將embed的內(nèi)容寫入在頁面上，防止有些瀏覽器直接跳過js代碼,；）

: 1
2
3
4
5
6
<div id='mask'>div>
<div id='videoModal'>
<div id='closeBtn'><a>xa>div>
div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

第三步：就是使用jquery獲取到點擊事件,，并判斷是否是需要點擊的對象；

: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var embedEle;
var videoID='';
var videoSrc;
var videoModal = $('#videoModal');
var $targetEle = $('#videoList').find('li');
//點擊視頻,，判斷是否是button,，排除其他內(nèi)容
$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;
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1.根據(jù)data-item的值，獲取點擊的data-item,并執(zhí)行isWhichSrc(num)函數(shù),并將獲取到的視頻鏈接賦值給`videoID = isWhichSrc(dataItem);`

: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

2.然后將此值傳入給videoFunc(videoid),；videoFunc(videoid)函數(shù)中,，創(chuàng)建`embed`并添加到頁面上；

: 1
2
3
4
5
6
7
8
9
function videoFunc(videoid) {
  videoSrc = 'http://player.youku.com/player.php/sid/'+videoid+'==/v.swf?VideoIDS='+videoid+'==&isAutoPlay=true&isShowRelatedVideo=false&showAd=0';
  embedEle = '+videoSrc+'' allowFullScreen='true' quality='high' width='610' height='460' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'>';
  //將獲得的embed標簽添加進去
  videoModal.append(embedEle);
  $('#videoModal').slideDown(600);
  showMask();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

最后就是關(guān)于遮罩層的函數(shù)：

: 1
2
3
4
5
6
7
8
9
10
11
12
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');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX