• chaper5 音频与视频

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 音频与视频

    audio播放音频

    <audio src="resource.mp3" controls ></audio>
    controls:显示播放控件
    preload: auto(下载整个文件)/metadata(现获取音频文件开头的数据块,足以确定一些基本的信息)/none(不预先下载)
    autoplay:自动播放
    loop: 播完之后重新开始

     

    video播放视频

    <video src="resource.mp4" controls poster="resouce_thumbnail.jpg"></video>
    同样的有controls、preload、autoplay、loop等属性
    此外还有height和width用于设置视频窗口大小的属性
    poster顾名思义就是用于替换视频的图片,这个会在视频没有加载的情况下被浏览器使用

    • 格式的争论与后备措施

    HTML5视频音频编码格式,目前主流浏览器并没有统一标准。

    Chrome支持 Google自己主导的Webm开放格式(.webm),Ogg开放格式(.ogg),和H.264商业格式(.mp4).

    Firefox支持 Webm开放格式(.webm),Ogg开放格式(.ogg)。并不支持 H.264 

    IE只支持 H.264,并不支持其他任何开放格式。

     

    在当前的情况下,为了尽量在每一款浏览器上都能正常显示,可以考虑一个后备情况,采用<source>元素以及以flash作为后备

    <video controls width="704" height="400">

      <source src="beach.mp4" type="video/mp4">

      <source src="beach.ogv" type="video/ogg">

      <object id="flowplayer" width="704" height="400"

       data="flowplayer-3.2.7.swf" 

       type="application/x-shockwave-flash">

        <param name="movie" value="flowplayer-3.2.7.swf" /> 

        <param name="flashvars" value='config={"clip":"http://reboot-me.com/beach.mp4"}' />

            

            <img src="houbei.jpg" alt="替代视频的图片">

            <p>你的浏览器不支持HTML5视频以及Flash</p>

            <p>你可以下载视频观看,<a href='beach.mp4'>mp4格式</a>或者<a href='beach.ogv'>ogv格式</a></p>

      </object>

    </video>

    在这段代码里面,source元素扮演的是可供浏览器选择的视频源,浏览器会播放第一个它所支持的文件。有个小技巧是将mp3或mp4格式的source标签放在最前面以免IOS3.X的浏览器出现错误

     

    由于不识别video标签的浏览器还大量存在,因此在<video>标签里面添加后备就是很必要的。一种是可以采用下面的文字提示的方式,另一种就是上面蓝色部分的用flash视频播放器

     

    <video controls width="704" height="400">

      <source src="beach.mp4" type="video/mp4">

      <source src="beach.ogv" type="video/ogg">

      <p>你的浏览器不支持HTML5视频,请升级!</p>

    </video>

     

    更可恶的是还有连flash都没有装的浏览器,这样岂不是只有用图片作为后备了,这种情况下就使用上方红色部分的代码实现吧

    • 使用JavaScript控制播放器

    添加音效

    play()和pause()可以控制音视频对象的播放和暂停

    有意思的例子:http://www.prosetech.com/html5/Chapter%2005/SoundEffects.html

    这里面有背景音乐,还会在每一个小球与地面碰撞的时候调用下面的boing()方法播放特殊音效

    var audioElementCount = 3;

    var audioElementIndex = 1;

     

    function boing() {

      // Rollover to the next <audio> element in the sequence.

      var audioElementName = "audio" + audioElementIndex;

      var audio = document.getElementById(audioElementName);

     

      audio.currentTime = 0;

      audio.play();

      if (audioElementIndex == audioElementCount) {

        audioElementIndex = 1;

      }

      else {

        audioElementIndex += 1;

      }

    }

     

    对于使用javascript添加音视频可以采用下面的方法判断浏览器是否支持然后再处理

    var audio=document.createElement("audio");

    if(audio.canPlayType("audio/ogg")){

        audio.src="newSound.ogg"

    }else if(audio.canPlayType("audio/mp3")){

        audio.src="newSound.mp3"

    }

     

    创建自定义视频播放器

    http://www.prosetech.com/html5/Chapter%2005/UglyPlayer.html

    video.playbackRate()=2  //设置两倍速度播放

     

    video.playbackRate()=0.5  //设置慢速度播放

    进度条使用两个嵌套的DIV实现的 (其实可以使用<progress>,但是因为支持这个标签的浏览器太少了)

     

    function progressUpdate() {

        var positionBar = document.getElementById("positionBar");

        positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";

        displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";

    }

     

     

     <video id="videoPlayer" ontimeupdate="progressUpdate()">

        <source src="butterfly.mp4" type="video/mp4">

        <source src="butterfly.ogv" type="video/ogg">

      </video>

    • Javascript媒体播放器

    有现成的HTML5播放器可以选择。比如jPlayer(http://www.jplayer.org/)和VideoJS(http://www.videojs.com/

    使用VideoJS,先下载Javascript文件,然后在head中引用js和css 

    <script src="video.js"></script>

    <link rel="stylesheet" href="video-js.css">

    然后使用使用平常的方式,唯一不同的是需要用一个特殊的div元素包装video元素

     

    <div class="video-js-box">

    <video class="video-js" id="videoPlayer" width="640" height="300" controls ……>

        <source src="butterfly.mp4" type="video/mp4">

        <source src="butterfly.ogv" type="video/ogg">

      </video>

    </div>

    • 标签:
    • 音频
    • 浏览器
    • 格式
    • 浏览器格式
    • 播放器
    • 标签
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部