• 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教程技巧

使用HTML5在网页中嵌入音频和视频播放的基本方法_html5教程技巧

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

本文主要包含HTML5,视频,音频,audio,video等相关知识,匿名希望在学习及工作中可以帮助到您
HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

嵌入视频
下面是在 Web 页面中嵌入视频文件最简单的形式:

  1. <video src="foo.mp4" width="300" height="200" controls>
  2. Your browser does not support the <video> element.
  3. video>

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

  1. >
  2. <html>
  3. <body>
  4. <video width="300" height="200" controls autoplay>
  5. <source src="/html5/foo.ogg" type="video/ogg" />
  6. <source src="/html5/foo.mp4" type="video/mp4" />
  7. Your browser does not support the <video> element.
  8. video>
  9. body>
  10. html>

Video 属性规范
HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:

属性 描述
autoplay 如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer 如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls 如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height 这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop 如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload 指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster 这是一个图像 URL,显示到用户播放或快进。
src 要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。
width 这个属性以 CSS 像素的形式指定视频显示区域的宽度。

嵌入音频
HTML5 支持的 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

  1. <audio src="foo.wav" controls autoplay>
  2. Your browser does not support the <audio> element.
  3. audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

  1. >
  2. <html>
  3. <body>
  4. <audio controls autoplay>
  5. <source src="/html5/audio.ogg" type="audio/ogg" />
  6. <source src="/html5/audio.wav" type="audio/wav" />
  7. Your browser does not support the <audio> element.
  8. audio>
  9. body>

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

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03html5 实现客户端验证上传文件的大小(简单实例)_html5教程技巧
  • 2018-12-03详解微博发言框的@功能
  • 2018-12-03移动端页面布局应该如何操作
  • 2018-12-03HTML5 有哪些让你惊艳的 demo?
  • 2018-12-03关于移动端h5开发相关内容总结
  • 2018-12-03html5拖曳操作 HTML5实现网页元素的拖放操作_html5教程技巧
  • 2018-12-03基于HTML5代码实现折叠菜单附源码下载_html5教程技巧
  • 2017-08-06html5基础标签(html5视频标签 html5新标签用法)
  • 2018-12-03html5开发手机打电话发短信功能代码实例分享
  • 2018-12-03html5web存储实例代码

文章分类

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

最近更新的内容

    • svg path路径的作用:svg path在网页开发中的使用方法
    • HTML5实战与剖析之原生拖拽(三dataTransfer对象)
    • canvas与html5实现视频截图功能示例
    • 小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器
    • html5 svg 中元素点击事件添加方法
    • i、em、b、strong元素的使用详解
    • 带你了解什么是HTML5?
    • 不能错过的10个 HTML5 开发教程
    • 快速玩转网页样式
    • HTML5 History API 实现无刷新跳转 _html5教程技巧

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

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