一篇文章教会你使用HTML5加载音频和视频

简介: 一篇文章教会你使用HTML5加载音频和视频

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

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

【二、嵌入视频】

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

 <video src="img/sounds/mu04.mp3"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

image.png

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

  1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
  2. mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/3.mp4" type="video/ogg" />
       <source src="img/sounds/3.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

image.png

【四、嵌入音频】

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

<audio src="img/sounds/mu04.mp3" controls autoplay>
    Your browser does not support the <audio> element.   
</audio>

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

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

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/mu04.mp3" type="video/ogg" />
       <source src="img/sounds/mu04.mp3" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

image.png

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

image.png

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

相关文章
|
3月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
62 2
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
26天前
|
移动开发 JavaScript 前端开发
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
|
26天前
|
Web App开发 移动开发 iOS开发
HTML5 Audio(音频)
HTML5 Audio 标准允许网页直接播放音频文件,无需依赖插件。通过 `&lt;audio&gt;` 标签,开发者可以在网页中嵌入音频,支持多种格式如 MP3、WAV 和 Ogg。主流浏览器如 IE9+、Firefox、Chrome、Safari 和 Opera 均支持此功能,但不同浏览器对音频格式的支持存在差异。使用 `&lt;source&gt;` 标签可指定多个源文件,确保兼容性。
|
26天前
|
Web App开发 移动开发 iOS开发
HTML5 Video(视频)1
HTML5引入了&lt;video&gt;元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。&lt;video&gt;元素可通过多个&lt;source&gt;子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
|
2月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
44 3
|
2月前
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`&lt;audio&gt;`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
|
2月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
130 2
|
3月前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
3月前
|
移动开发 编解码 前端开发
HTML5 <video>视频详解
HTML5引入了内置的`&lt;video&gt;`标签,简化了网页中视频的嵌入与播放。本文详细介绍了HTML5视频的基本语法、常用属性(如controls、autoplay等)、示例代码及使用注意事项,包括浏览器兼容性、跨域请求处理和响应式设计。通过JavaScript还可实现对视频播放的动态控制。掌握这些技巧,有助于提升网站的多媒体体验。
|
3月前
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `&lt;audio&gt;` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
下一篇
DataWorks