## 快捷向页面导入文件，视频，音乐的方法

最新推荐文章于 2024-07-11 10:13:49 发布

快乐的小海海

最新推荐文章于 2024-07-11 10:13:49 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44539055/article/details/86556985

本文介绍了使用DW（Dreamweaver）开发工具，通过Html和Css快速向网页中导入文件、视频及音乐的详细方法，由FHJ于2019年1月19日分享。

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

快捷向页面导入文件，视频，音乐的方法

开发工具与关键技术：DW / Html Css
作者：　FHJ
撰写时间：2019年1月1９日星期六

页面中导入文件，视频，音乐的方法

１.导入文件
<div class="fans">
	<label for="input_file">添加附件</label>
	<input type="file" id="input_file" hidden="hidden">
	<!--点击按钮能连接外部文件进行添加-->
</div>
２. 导入视频
<div class="czyong">
	<video src="video/trailer.mp4" controls poster="video/trailer.mp4" width="100%" height="200" loop>
	</video>
	<!--从文件导入视频-->
２. 导入音乐
<audio controls autoplay loop preload="preload">
  <source src="9596乐队 - 思念爱 (Live).m4a"  type="audio/mpeg" />

在这里插入图片描述

源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导入外部东西</title>
<style>
	body{
	background: #E36163;
	}
	.fans{
		width: 80px;
		height:30px;
		line-height: 30px;
		text-align:center ;
		background:#41A9F4;
	   border-radius: 15px;
		cursor:pointer; /*鼠标移入变手形状!!*/
      margin: 100px auto;
	}
	.fans label{
	cursor:pointer; /*鼠标移入变手形状!!*/
	}
	.czyong {height:200px;width:500px; background: #FFFFFF; margin:100px auto;}
	.jsang{
	margin: 0 500px;
	}
</style>
</head>
<body>
<div class="fans">
	<label for="input_file">添加附件</label>
	<input type="file" id="input_file" hidden="hidden">
	<!--点击按钮能连接外部文件进行添加-->
</div>
<div class="czyong">
	<video src="video/trailer.mp4" controls poster="video/trailer.mp4" width="100%" height="200" loop>
	</video>
	<!--从文件导入视频-->
	</div>
<div class="jsang">  
 <audio controls autoplay loop preload="preload">
  <source src="9596乐队 - 思念爱 (Live).m4a"  type="audio/mpeg" />
</audio>
<!--<!--从文件导入音乐-->
</div>
</body>
</html>