当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5--实现视频切换效果

HTML5--实现视频切换效果

2020年07月13日  | 移动技术网IT编程  | 我要评论

1**. 视频切换样式：**
在这里插入图片描述
点击右边的字体会实现不同视频的切换
2. 实现视频切换的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>精彩视频播放</title>
<link rel="stylesheet"  type="text/css"  href="common.css" >
<style>
	video{
		width: 700px;
		height: 400px;
	}
	#right section{
		clear: both;
		box-sizing: border-box;
		padding-left: 15px;
	}
	#right img{
		float: left;
		width: 150px;
		height: 100px;
	}
	#right div{
		float: left;
		width: 125px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	#right div header{
		font-size: 14px;
		font-weight:bold;
	}
	#right a {
		color: #000;
	}

</style>
</head>

<body>	
	<div id="mainContent">
	<div id="left">
		<p id="videotitle">欣赏音乐视频</p>
		<video id="myVideo" controls autoplay >
		<source src="汪峰-怒放的生命 (新版) (《北京青年》电视剧插曲)(高清).mp4" type="video/mp4">
		</video>  	
	</div>
	<div id="right">
		<img src="picture/drag2.jpg" alt="">
		<div>
		    <header><a href="javascript:void(0)" dir="Michael Learns To Rock-Take Me To Your Heart (KTV版) (《吻别》英文版)(标清).mp4">take me to your heart </a></header>
			<p>请欣赏</p>
			<p id="dil">点击量：11万+</p>
		</div>
		<img src="picture/drag3.jpg" alt="">
		<div>
		    <header><a href="javascript:void(0)" dir="张杰-最美的太阳(标清).mp4">最美的太阳</a></header>
			<p>请欣赏最美的太阳</p>
			<p id="djl">点击量：10万+</p>
		</div>
	</div>	

</div>
	
<script src="otherhtml/jquery-1.11.3.js"></script>
	<script>
	      $(function(){
			  var video =document.getElementById("myVideo");
			  var source =document.getElementsByTagName("source");
			  $("#right a").click(function(){
				  var name =$(this).attr("dir");
				  var vediotile=$(this).html();
				  //修改视频源
				  source[0].src=name;
				  $("#videotile").html(vediotile);
				  //重新加载
				  video.load();
			  });
		  });
	</script>
</body>
</html>

3.相关资源的下载
jquery-1.11.3.js和common.css百度网盘下载链接如下
链接：https://pan.baidu.com/s/13H5hQL_6ZlaMwMPFLJyCNA
提取码：fmhu
链接：https://pan.baidu.com/s/1CK0dhOhqIyu8zQinI0YffA
提取码：64h0
复制这段内容后打开百度网盘手机App，操作更方便哦

注：图片，视频均来自网络

本文地址：https://blog.csdn.net/weixin_43379235/article/details/107279523

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网