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

一、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的事件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

1112
来自专栏每日一篇技术文章

weex-07-通用布局

weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!

2111
来自专栏一“技”之长

iOS UIProgressView控件用法

- (instancetype)initWithProgressViewStyle:(UIProgressViewStyle)style;

1012
来自专栏cnblogs

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 ? .content-size, .border-size{ ...

2448
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

20810
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

6146
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

992
来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

3543
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

1122
来自专栏Ryan Miao

博客园主题修改中用到的css属性

样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. ...

3247

扫码关注云+社区

领取腾讯云代金券