第181天:HTML5——视频、音频

简介: 一、HTML5新增的video、source标签1

一、HTML5新增的videosource标签

1 <video width="320" height="240" controls="controls“ poster="/images/w3school.gif"> 
2       <source src="movie.ogg" type="video/ogg"> 
3       <source src="movie.mp4" type="video/mp4"> 
4       您的浏览器不支持video标签 
5 </video> 

二、HTML5支持的视频格式

三、video标签的属性

四、HTML5的音频标签

1 <audio src="好久不见.mp3" autoplay controls>
2          您的浏览器不支持 audio 标签。
3 </audio>

HTML5支持的音频格式 .wav .mp3

五、音频标签的属性

六、浏览器默认播放控件

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4     <script>
 5     window.onload=function  () {
 6          var playbtn=document.getElementById("play");
 7          var video=document.getElementById("video");
 8          playbtn.onclick=function  () {
 9                video.play();
10          }
11     }
12     </script>
13     </head>
14     <body>
15       <video controls=controls  loop =loop poster="1.jpg" id="video">
16         <source src="iceage4.mp4"></source>
17         <source src="iceage4.webm"></source>
18       </video>
19       <input type="button" value="播放" id="play"/>
20       <audio src="fcml.mp3" controls=controls >
21       </audio>
22     </body>
23 </html>

七、自定义播放控件相关API

video.webkitRequestFullScreen() : 全屏

video.paused : 布尔值,是否暂停

video.play() : 播放

video.pause() : 暂停

事件:

timeupdate : 当前播放位置发生改变时产生该事件

video.currentTime :当前播放的时间,单位秒

video.duration: 返回总时间,单位秒

video.muted: 布尔值,是否静音

video.volume() : 设置音量

 

八、Video更多API参考

九、Video的API属性

 

十、Video的事件

 

 

相关文章
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
168 0
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
|
9月前
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
459 0
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
45 0
|
9月前
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
153 0
|
8月前
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
178 0
|
9月前
|
C#
C#视频—HTML标签(二)
C#视频—HTML标签
|
9月前
|
C#
C#视频—HTML标签(一)
C#视频—HTML标签