CSS & HTML5 video switch

来源：互联网发布：js判断edge浏览器内核编辑：程序博客网时间：2024/05/16 06:39
<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>
0 0