CSS & HTML5 video switch

最新推荐文章于 2024-06-11 08:00:00 发布

ygd11

最新推荐文章于 2024-06-11 08:00:00 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/ygd11/article/details/17625259

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML5和CSS实现的视频轮播案例，通过简单的JavaScript代码实现了视频之间的切换和播放控制。该案例展示了如何利用HTML5的video标签来播放不同格式的视频文件，并通过CSS样式美化页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>BaoGuoChen</title>
<style type="text/css">
	body {
             background:url("");
             background-color: white;
        }
	#wrap {
                background-color: gray;
		width:500px;
		height:1000px;
		margin:0 auto;
	        text-align: center;
	}
	a:link {color:#FF0000;}    /* 未被访问的链接 */
	a:visited {color:#00FF00;} /* 已被访问的链接 */
	a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
	a:active {color:#0000FF;}  /* 正在被点击的链接 */
	#container {
		width: 600px;
		margin: 20px auto;
		text-align: center;
	}
	header {
		margin-bottom: 20px;
	}
	h1 {
		color: #3E4415;
		font-size: 20px;
		font-weight: normal; 
	}
	#images {
		width: 400px;
		height: 160px;
		overflow: hidden;
		position: relative;
		
		margin: 0px auto;
	}
	#images video {
		width: 400px;
		height: 160px;
		
		position: absolute;
		top: 0;
		left: -400px;
		z-index: 1;
		opacity: 0;
		
		transition: all linear 500ms;
		-o-transition: all linear 500ms;
		-moz-transition: all linear 500ms;
		-webkit-transition: all linear 500ms;
	}
	#images video:target {
		left: 0;
		z-index: 9;
		opacity: 1;
	}
	#images video:first-child {
		left: 0;
		opacity: 1;
	}
	#slider a {
		text-decoration: none;
		background: #E3F1FA;
		border: 1px solid #C6E4F2;
		padding: 4px 6px;
		color: #222;
	}
	#slider a:hover {
		background: #C6E4F2;
	}
</style>
</head>
<body>
<div id="container">

	<header>
		<h1></h1>
	</header>

	<section>
		<div id="images">
			<video id="image1" width="320" height="160" controls="controls" autopaly>
				<source src="baoguochen.ogv" type="video/ogg">
				<source src="baoguochen.mp4" type="video/mp4">
				Your browser does not support the video tag.
			</video>

			<video id="image2" width="320" height="160" controls="controls">
				<source src="2.ogv" type="video/ogg">
				<source src="2.mp4" type="video/mp4">
				Your browser does not support the video tag.
			</video>

			<video id="image3" width="320" height="160" controls="controls">
				<source src="3.ogv" type="video/ogg">
				<source src="3.mp4" type="video/mp4">
				Your browser does not support the video tag.
			</video>
		</div>
		<div id="slider">
			<a href="#image1" onclick="click_1()">1</a>
			<a href="#image2" onclick="click_2()">2</a>
			<a href="#image3" onclick="click_3()">3</a>
		</div>
	</section>

     </div>

<script type="text/javascript">
var myimages = new Array()
myimages[0] = "image1"
myimages[1] = "image2"
myimages[2] = "image3"

function pausePlayCurrentVideo(bgc_current_video_id){
	for (i=0;i<myimages.length;i++)
	{
 	  var myvideo = document.getElementById(myimages[i]);
          if(myimages[i] == bgc_current_video_id){
              myvideo.play();
           }else{
              myvideo.pause();
           }
	}
}
function click_1(){
pausePlayCurrentVideo("image1");
}
function click_2(){
pausePlayCurrentVideo("image2");
}
function click_3(){
pausePlayCurrentVideo("image3");
}
</script>
</body>
</html>