rinetd Spring Cloud resultMap linq vue手册 jq延时 oracle一键卸载工具 手机banner常用尺寸 erp项目描述 cos图像和sin图像 hbase集群搭建 edate函数的使用方法 java时间戳 matlab中如何定义函数 python面向对象 网页设计公司 python3删除文件 python日期转时间戳 python实战 javalabel java数据库 java语言简介 java怎么安装 嵌入式开发教程 雪地求生 给视频加字幕的软件 暗黑3挂机plusready 西门子触摸屏编程软件 wps苹果mac版 数据库同步解决方案 hexdump js压缩图片 强制换行快捷键 搜狗拼音输入法安装包 python画散点图 控制面板命令 保卫萝卜攻略沙漠7 雷达图怎么做 手机模拟器电脑版 送货单软件
当前位置: 首页 > 学习教程  > 编程语言

HTML5_元素audio、Video与scores

2020/8/11 19:59:04 文章标签:

HTML

  • 一、audio
  • 二、Video
  • 三、source

一、audio

audio元素:定义音频
controls属性:该属性,会向用户显示控件,如播放按钮。
loop属性:重复播放。
muted属性:静音。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#name{
				height: 50px;
				width: 300px;
				border: 1px solid #00BFFF;
				text-align: center;
				vertical-align: middle;
				line-height: 50px;
				background: #00BFFF;
			}
			#music{
				height: 50px;
				width: 300px;
				border: 1px solid #00BFFF;
				float: left;
			}
		</style>
	</head>
	<body>
		<p id="name" >千古绝唱</p>
		<audio id="music" src="http://ws.stream.qqmusic.qq.com/C4000005X2pM18dWv6.m4a?guid=933912672&vkey=CCFF6EC038B7D58D95F38588643D1E996E49024A81A4ADDAEE56C0CB4AD312E110B483C3979CA12B47E4FFB5B7C783EE912DD615269BF91A&uin=0&fromtag=66" controls="controls" ></audio>
	</body>
</html>

二、Video

Video元素:定义视频
autoplay属性:该属性,会让视频在就绪后马上播放。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#name{
				height: 50px;
				width: 600px;
				border: 1px solid #00BFFF;
				text-align: center;
				vertical-align: middle;
				line-height: 50px;
				background: #00BFFF;
			}
			#movie{
				height: 300px;
				width: 600px;
				border: 1px solid #00BFFF;
				float: left;
			}
		</style>
	</head>
	<body>
		<p id="name" >斗罗大陆</p>
		<video src="电影链接" id="movie" autoplay="autoplay" ></video>
	</body>
</html>

三、source

source 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video controls autoplay="autoplay" >
			<!-- 不同的浏览器因htlm兼容性不同,选择不同,选择其一 -->
		   <source src="链接">
		   <source src="链接">
		</video>
	</body>
</html>


本文链接: http://www.dtmao.cc/news_show_100271.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?