为了账号安全,请及时绑定邮箱和手机立即绑定

embed嵌入多个优酷视频并自动播放

关于<embed>的使用,大家应该是比较熟悉的,现在先展示一下效果,然后在慢慢解释如何使用它们。

特点:

多个视频选择;
弹出模态框,不能上下滑动;
视频自带可全屏;
视频自动播放;
兼容IE,IE会有播放残留,所以让其刷新页面;
其他浏览器:火狐,谷歌,edge,safari等;

ps:右上角可以运行代码,并且可以全屏展示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>youku-video-embed</title>
</head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
* {
	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);
}

</style>
<body>
<!--遮罩层-->
<div id="mask"></div>
<!--视频区-->
<div id="videoModal">
  <div id="closeBtn"><a>x</a></div>
</div>

<!--按钮-->
<div class="wrapper">
	<h3>embed链接优酷视频自动播放</h3>
	<ul id="videoList">
		<li data-item="1">
			<button type="button" name="video01">视频01</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p>
		</li>
		<li data-item="2">
			<button type="button" name="video02">视频02</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
		<li data-item="3">
			<button type="button" name="video03">视频03</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
		<li data-item="4">
			<button type="button" name="video04">视频04</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
	</ul>
</div>


<!--js-->
<script>
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;
  }
});
//关闭
$("#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 src='"+videoSrc+"' allowFullScreen='true' quality='high' width='610' height='460' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>";
  //将获得的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");
}

</script>
</body>
</html>

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

首先,先看一下嵌入网页中优酷视频的完整代码(直接从优酷分享得到的HTML代码):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>embed</title>
</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>

代码中,<embed>的相关属性:

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>embed</title>
</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>

这些属性一看就明白:

isAutoPlay=true — 是否自动播放;
isShowRelatedVideo=false — 是否展示相关视频;

好了,embed的常用属性介绍完毕,接下来咱们一起看看如何跟换视频的链接:
第一步:由于是多个视频展示,所以复制多个data-item值:

<ul id="videoList">
		<li data-item="1">
			<button type="button" name="video01">视频01</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p>
		</li>
		<li data-item="2">
			<button type="button" name="video02">视频02</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
		<li data-item="3">
			<button type="button" name="video03">视频03</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
		<li data-item="4">
			<button type="button" name="video04">视频04</button>
			<p>视频简介</p>
			<p>视频描述视频描述视频描述</p></li>
	</ul>

第二步:模态框设置,并且设置视频关闭按钮,(这里没有直接将embed的内容写入在页面上,防止有些浏览器直接跳过js代码;)

<!--遮罩层-->
<div id="mask"></div>
<!--视频区-->
<div id="videoModal">
  <div id="closeBtn"><a>x</a></div>
</div>

第三步:就是使用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 src='"+videoSrc+"' allowFullScreen='true' quality='high' width='610' height='460' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>";
  //将获得的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");
}
点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消