• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5视频与声频详解

html5视频与声频详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含PHP,PHP100,PHP教程,PHP论坛,EclipsePHP,视频教程等相关知识,匿名希望在学习及工作中可以帮助到您
[导读] html5视频video与声频audio详解 在html5中出现了一些新特性:canvas 元素视频 video 和 声频audio 元素 ;对本地离线存储(localstorage,sessionstorage)的支持 ;新增特殊内容元素:article、footer

html5视频video与声频audio详解

在html5中出现了一些新特性:

canvas 元素
视频 video 和 声频audio 元素 ;
对本地离线存储(localstorage,sessionstorage)的支持 ;
新增特殊内容元素:article、footer、header、nav、section ;
新增表单控件: calendar、date、time、email、url、search 。
今天看看视频和声频:在html5中规定了视频的标准方法:video

<video src="xxx.ogg" controls="controls">你的浏览器还不支持哦</video> 我们也可以设置多个source,浏览器会为我们选择第一个可识别的视频来播放,形如:<video width="320" height="240" controls="controls"> <source src="xxx.ogg" type="video/ogg"> <source src="xx1.mp4" type="video/mp4">你的浏览器还不支持哦</video>video属性有:属性 值 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 像素 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url视频地址 要播放的视频的 url。
width 像素 设置视频播放器的宽度。
autobuffer
autobuffer

(自动缓冲)
在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关api进行内容缓冲

poster
url图片地址

当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来

在html5 规定了声频标准为 audio 元素,audio 元素能够播放声音文件或者音频流。

audio格式和video相似:直接行多source:

<audio controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx1.mp3" type="audio/mpeg">
你的浏览器还不支持哦
</audio>其属性比video少了height、width、poster。在我们的开发中多媒体越来越重要,html5出现了这些video和audio。

以上就是 html5视频与声频详解的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 编写html5时调试发现脚本php等网页js、css等失效
  • HTML5中文件上传的代码
  • 使用PHP和HTML5 FormData实现无刷新文件上传
  • 快速掌握前端开发技巧
  • html5+JavaScript进行邮箱地址验证
  • linux下HTML5用户及用户组管理命令详解
  • jquery 遍历parent()方法
  • html5视频与声频详解
  • html5+php如何实现文件拖动上传功能
  • html5入门之设计原理解析

相关文章

  • 2018-12-03配置H5的滚动条样式
  • 2018-12-03indexedDB 数据库
  • 2018-12-03DOM对象入门教程:10个DOM对象零基础入门教程推荐
  • 2017-08-06HTML5中的nav标签学习笔记
  • 2018-12-03用canvas实现简单的下雪效果(附代码)
  • 2018-12-03HTML5技术之图像处理:一个滑动的拼图游戏
  • 2018-12-03用html5的63行代码实现贪吃蛇游戏
  • 2018-12-03html5指南(4)-使用Geolocation的详解
  • 2018-12-03使用phonegap关于操作数据库的具体实现方法介绍
  • 2018-12-03解析HTML5中的标签嵌套规则

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5实现圈泡泡游戏的代码分享
    • 如何在网站上添加谷歌定位信息
    • 简单的HTML5 Web Storage留言册
    • HTML5和以前HTML4的区别整理
    • 7款开发者最常用的Sublime text 3插件
    • 如何利用phonegap获取设备信息的方法
    • 检测浏览器支持哪些HTML5新特性的方法
    • H5的地理定位怎样使用
    • 利用纯html5绘制出来的一款非常漂亮的时钟
    • 详细分析HTML5 FormData对象的使用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有