多媒体的应用html

最新推荐文章于 2023-11-05 22:00:00 发布

knowledge...

最新推荐文章于 2023-11-05 22:00:00 发布

阅读量85

点赞数

分类专栏： java web

本文链接：https://blog.csdn.net/weixin_45807622/article/details/108851803

版权

java web 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

这个博客展示了如何使用HTML5的`

摘要由CSDN通过智能技术生成

视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--视频-->
		<!-- autoplay 自动播放  
		     controls 视频播放的控制条  
		     poster视频的封面属性   
		     loop视频无线循环  
		     muted  视频静音-->
		<video width="800" height="800"
			   muted="muted"
			   loop="loop"
			   poster="img/iceage.jpg"
			   autoplay="autoplay" 
			   controls="controls">
			<source src="video/myVideo.mp4" type="video/mp4"></source>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="video/myVideo.mp4">下载视频</a>
		</video>
		
		
	</body>
</html>

音频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css样式-->
		<style type="text/css" >
			#left{
				position: absolute;
				/*绝对定位*/
				width: 30%;
				background: paleturquoise;
				/*背景颜色*/
				height: 100%;
			}
			#right{
				/**/
				margin-left: 30%;
				position: absolute;
				/*绝对定位*/
				width: 70%;
				background: palegoldenrod;
				/*背景颜色*/
				height: 100%;
			}
			
		</style>
	</head>
	<body>
		
		  <audio 
		  	loop="loop"
		  	id="music"
		  	> 
		       
		  </audio>
		  <!--块级的容器-->
		  <div id="left">
		  	<!--
              	音乐的名单列表
              -->
              <ul>
              	<li><a href="javascript:change('audio/summer.mp3','img/summer.jpg')">summer</a></li>
              	<li><a href="javascript:change('audio/安妮的仙境.mp33','img/安妮的梦境.jpg')">安妮的梦境</a></li>
              </ul>
		  </div>
		  <div id="right">
		  	<img 
		  		 id="pic"
		  		 src="img/summer.jpg" 
		  		 width="100%"
		  		 />
		  </div>
	</body>
	<script type="text/javascript">
		 function  change(song,fengmian){
		 	//设置播放的歌曲
		 	document.getElementById("music").src=song;
		 	//播放歌曲
		 	document.getElementById("music").play();
		 	//切换封面
		 	document.getElementById("pic").src=fengmian;
		 	
		 }
	</script>
</html>

knowledge...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多媒体的应用html

视频<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body>  <!-- autoplay 自动播放 controls 视频播放的控制条 poster视频的封面属性 loop视频无线循环
复制链接

扫一扫

专栏目录