zoukankan      html  css  js  c++  java
  • HTML5 video 和 audio

    HTML5 video 和 audio

     

    video

    用于在HTML或者XHTML文档中嵌入视频内容

    使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4

    1. OGG:采用 Theora 视频格式和 Vorbis 音频解码器 (目前比较主流的视频格式)
    2. MPEG-4:采用 H.264 视频格式和 AAC 音频解码器 (手机端的视频格式)
    3. WebM:采用 VP8 视频和 Ogg Vorbis (目前唯一 一个支持超高清视频格式)
      • 该视频格式出自 Google 公司

    video 元素中可以使用 source 子元素来向浏览器提供备选视频格式,注意 source 元素是单标签

    作用:实现各个浏览器的兼容性

    <video>
        <source src="xxx.mp4">
        <source src="xxx.ogg">
        <source src="xxx.webm">
    </video>

    video 元素的属性

    • controls:用于显示浏览器所提供的视频控件按钮
    • autoplay:设置这个属性以后,视频会自动播放
    • poster:该属性指定一个 URL(相对URL / 绝对URL),用于在视频播放之前显示一张图片,视频开始播放后图片自动消失
    • preload:预加载,该属性可以设置三个值
      1. none:不缓存视频,减少不必要的流量
      2. metadata:只加载除视频之外的信息(宽和高)
      3. auto:默认值,要求浏览器尽可能快地下载视频
    • loop:设置这个属性后,视频将会自动循环播放
    <video autoplay controls poster="xxx.png" preload="auto" loop></video>

    HTML5 新加入的 API

    事件名称

    • progress
    • pause:视频暂停时触发

      var media = document.getElementById('media');
      media.addEventListener('pause', function(){
      alert('暂停');
      }, false);
    • play:视频开始播放时触发

      var media = document.getElementById('media');
      media.addEventListener('play', function(){
      alert('开始播放');
      }, false);
    • ended:视频到达末尾时触发

      var media = document.getElementById('media');
      media.addEventListener('ended', function(){
      alert('播放完毕');
      }, false);
    • canplay:视频能够播放时就会触发

    HTML5 新增的媒体处理方法

    • play():播放媒体文件
    • pause():暂停播放
    • load():加载视频

    HTML5 新增的针对视频元素处理属性

    • ended:视频结束播放,值为true
    • paused:视频处于暂停或没播放状态,值为true
    • currentTime:获取或者设置视频播放的位置
    • duration:视频的时长

    audio

    audio 元素可以实现在 HTML 页面中嵌入音频内容,该元素的属性可以设置是否自动播放、预加载及循环播放等

    audio 元素提供了播放、暂停和音量控件来控制音频

    使用 audio 元素提供三种音频格式的文件:mp3、Ogg 和 Wav

    • MP3:采用 mpeg 音频解码器
    • Ogg:采用 ogg 音频解码器
    • Wav:采用 wav 音频解码器
  • 相关阅读:
    delphi XE5下安卓开发技巧
    Android开发者必备的42个链接
    STORM_0007_Multi-Lang protocol of Storm/多语言协议的翻译
    STORM_0006_第二个storm_topology:WordCountTopology的代码与运行
    STORM_0005_第一个非常简单的storm topology的提交运行
    STORM_0004_windows下zookeeper的伪集群的搭建
    STORM_0003_linux_zookeeper_storm_遇到的几个问题
    数据结构与算法题目集(中文)7-19 求链式线性表的倒数第K项 (20分)
    数据结构与算法题目集(中文)7-11 关键活动 (30分) (关键路径!!!!)
    数据结构与算法题目集(中文)7-18 银行业务队列简单模拟 (25分)
  • 原文地址:https://www.cnblogs.com/wangli-66/p/5672743.html
Copyright © 2011-2022 走看看