HTML5学习笔记(二)视频与音频处理

一、<video>

 1、<video>是H5的新标签,用来处理视频,在此之前,各网站用来处理视频一直使用flash技术

    flash的缺点有以下几方面,首先原生浏览器原生不支持,需要插件,其次过多的使用会导致网站性能变差,最后就是智能移动端并不支持Flash技术

   与flash相比,<video>的优势,几乎所有浏览器原生支持<video>元素,性能更高,开发更容易,并且移动端支持非常好,

2、<video>支持的视频格式
        MP4格式 - 目前比较主流
        OGG格式 - 多用于移动端
        WebM格式 - 目前唯一支持超高清格式, 在HTML页面中支持超高清格式(HTML5)

3、如何使用<video>

      如果当前浏览器不支持<video>元素,在<video>元素内编写提示内容

      使用<source>元素
      <video>

        <strong>抱歉,你的浏览器不支持播放</strong>
        <source src="一种视频格式" />
        <source src="一种视频格式" />
        <source src="一种视频格式" />
     </video>

4、<video>元素的属性
         src - 引入视频文件的路径
          autoplay - 自动播放视频
          controls - 提供控制面板
          loop - 表示循环播放
          poster - 设置播放之前显示的图片
          width和height - 设置显示视频的宽度和高度
          preload - 预加载
             auto - (默认值)自动加载
         none - 不加载
         metadata - 只加载视频的基本信息(不含视频)

例、<video src="1.mp4"  controls  poster="2.png" width="640" height="400" style="background:black"></video>

5、高级使用内容

①方法
     play() - 播放视频
     pause() - 暂停视频
     load() - 加载视频
     canPlayType() - 判断当前浏览器是否支持指定视频格式

 ② 事件
     play - 当视频播放时被触发
     pause - 当视频暂停时被触发
     ended - 当视频结束时被触发
     error - 当视频错误时被触发
     canplay - 不考虑整体情况下,只要能播放,就播放
     canplaythrough - 考虑整体情况下,只要能播放,就播放
     progress - 表示视频加载的进度
 ③ 属性 - 用于判断
      paused - 表示判断当前视频是否暂停
           返回Boolean值,true表示暂停,false表示播放
      ended - 表示判断当前视频是否播放完毕
           返回Boolean值,true表示完毕
     duration - 表示当前视频的时长
     currentTime - 表示当前视频播放的位置

 

二、<audio>

1、<audio>元素支持音频格式
        MP3 - 目前最主流            OGG                    WAV

2、使用<audio>元素
       第一种 - 只支持一种音频格式
         <audio src="音频文件的路径"></audio>
       第二种 - 同时引入多个音频格式
         <audio>
             <source src="一种音频格式" />
             <source src="一种音频格式" />
             <source src="一种音频格式" />
        </audio>

3、属性与和方法与<video>基本相同,不做累述

 

猜你喜欢

转载自blog.csdn.net/shilipeng666/article/details/83893394