<embed>链接优酷视频并设置自动播放

昵称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

```

接下来咱们聊聊具体的使用：

首先，先看一下嵌入网页中优酷视频的完整代码（直接从优酷分享得到的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

代码中，

的相关属性：

src --- 指向资源；
quality='high' --- 视频的默认清晰度，一般为high;
width,height --- 视频的宽、高度；
align='middle' --- 视频的位置；
allowFullScreen='true' --- 是否运行全屏观看，默认true;
type='application/x-shockwave-flash' --- 各个浏览器支持情况；
allowScriptAccess='always' --- 特殊属性，用于确保Flash影片可能特定于某个版本的Flash；

常用的基本属性就这些了，不过，这个嵌入的视频，默认是不自动播放，下面来看看自动播放的设置代码：

: 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 --- 是否展示相关视频；

好了，embed的常用属性介绍完毕，接下来咱们一起看看如何跟换视频的链接：
第一步：由于是多个视频展示，所以复制多个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

第二步：模态框设置，并且设置视频关闭按钮，（这里没有直接将embed的内容写入在页面上，防止有些浏览器直接跳过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，排除其他内容
$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.根据data-item的值，获取点击的data-item,并执行isWhichSrc(num)函数,并将获取到的视频链接赋值给`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)函数中，创建`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

最后就是关于遮罩层的函数：

: 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