html5学习笔记（五）音频、视频

最新推荐文章于 2023-12-13 15:33:19 发布

oOo右右

最新推荐文章于 2023-12-13 15:33:19 发布

阅读量960

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/JOJOY_tester/article/details/53350383

版权

html 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

4-1 video/视频播放

学习要点

掌握video元素的基本用法

直到现在,在网页中的大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法，这样播放视频就不必依赖外部插件

在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识，有兴趣的朋友可以去查阅相关资料。我们重点学习video和audio两个元素的使用。

目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同，但是这个支持是动态变化的。

当前，video 元素支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

支持的浏览器有：Firefox、Opera、Chrome

MPEG4(mp4) = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

支持的浏览器有：IE9+、Chrome、Safari

虽然目前应用较广，单有专利保护，是收费在

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

支持的浏览器有：Chrome、Opera、Safari

专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用

video元素的属性

属性	属性值	描述
src	url	要播放的视频的 URL地址。
width	正整数/百分比	设置视频播放器的宽度。
height	正整数/百分比	设置视频播放器的高度。
autoplay	空值/autoplay	视频在就绪后自动播放。
loop	空值/loop	循环播放。
controls	空值/controls	向用户显示控件，比如播放按钮
poster	图片地址	视频未播放前显示的图片

preload auto/none/metadata 视频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。

  <video src="video/av.mp4" controls width=”100px” height=”100px” autoplay  loop poster=”picture/1.png”>
     当浏览器不支持video元素提示“你的浏览器不支持”
   </video>

4.2source元素-解决浏览器额兼容

HTML5 中新增的元素
video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题
如果使用了source元素，则不可以在video和audio中设置src属性

 <video controls poster="picture/1.png" loop autoplay>
   <source src="video/8.mp4"type="video/mp4">
    <!--浏览器从上到下检查视频格式，合适的就播放。-->
   <source src="video/8.webm" type="video/webm">
    抱歉你的浏览器不支持video元素
   </video>

<source src=”视频地址” type=”video/视频格式”>

4-4 audio元素/格式的转换

当前，audio 元素支持三种音频格式：

Ogg 免费, 支持的浏览器:Firefox、Opera、Chrome
MP3 收费, 支持的浏览器: IE9+、Chrome、Safari
Wav 收费, 支持的浏览器: Firefox、Chrome、Safari

audio元素的属性

属性	属性值	描述
src	url	要播放的音频的 URL地址。
controls	空值/controls	向用户显示控件，比如播放按钮
autoplay	空值/autoplay	音频在就绪后自动播放。一般不设置该属性。
loop	空值/loop	循环播放。
preload	auto/none/metadata	音频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。

source元素-解决浏览器额兼容

HTML5 中新增的元素
video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题
如果使用了source元素，则不可以在video和audio中设置src属性

<audio controls autoplay loop>
      <source src="audio/1.mp3" type="audio/mp3">
      <source src=”audio/1.mp3” type=”audio/mp3”>
   </audio>
   <audio controls loop autoplay>
      <source src="audio/2.mp3" type="audio/mp3">
    你的浏览器版本太低，请更换。。。
   </audio>

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <title>maklov..</title>
  <meta charset="utf-8">
  <meta name="author" content="liyue">
  <meta name="keywords" content="html,js">
  <style type="text/css">

  </style>
 </head>
 <body>

   <video src="video/1.mp4" controls width="250px" height="250px" autoplay poster="picture/1.png" loop>
    当浏览器不支持显示“你的浏览器不支持video元素”
   </video>

   <video  autoplay src="video/111.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay>
     当浏览器不支持video元素提示“你的浏览器不支持”
   </video>
   <video src="video/112.mp4" autoplay controls width="250px" height="250px" poster="picture/3.png" loop autoplay></video>
   <video src="video/4.mp4" controls autoplay width="250px" height="250px" poster="picture/4.png" loop></video>
   <video src="video/8.mp4" controls loop  autoplay width="250px" height="250px" poster="picture/1.png">
      你的浏览器不支持
   </video>
   <video src="video/5.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
   <video src="video/6.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
   <video src="video/7.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
   <video src="video/22.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
   <video src="video/9.mp4" controls width="250px" height="250px" poster="picture/1.png" autoplay></video>
   <video src="video/30.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
   <video src="video/31.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
   <video src="video/32.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
   <video src="video/33.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
   <video src="video/34.mp4" controls width="250px" height="250px" poster="picture/2.png" autoplay ></video>
 </body>
</html>

oOo右右

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5学习笔记（五）音频、视频

4-1 video/视频播放学习要点掌握video元素的基本用法直到现在,在网页中的大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法，这样播放视频就不必依赖外部插件在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识，有兴趣的朋友可以去查阅相关资料。
复制链接

扫一扫