zoukankan      html  css  js  c++  java
  • 视频,音频和其他多媒体

    视频,音频和其他多媒体

    1,原生多媒体:速度快,对插件依赖度低。

    2,视频文件的格式

    h5支持以下三种视频文件格式(编解码器)

    a,Ogg Theora文件,扩展名为:.ogg  或.ogv

    b,MP4文件,扩展名为:.mp4 或 .m4v

    c,WebM  扩展名:.webm

    3,在网页中添加单个视频

    <html>
       <body>
          <video scr="paddle.webm"></video>
       </body>
    </html>

    vedeo 的属性可以有:scr(源)  autoplay(自动播放)  controls(控件)  muted(静音)  loop(循环)  poster(海报)  width(宽)  height(高)  preload(预加载)

    4,为视频添加控件和自动播放

    <html>
       <body>
          <video scr="paddle.webm" controls></video>
       </body>
    </html>
    <html>
       <body>
          <video scr="paddle.webm"  autoplay></video>
       </body>
    </html>

    5,为视频指定循环播放和海报图像

    <html>
       <body>
          <video scr="paddle.webm" autoplay loop></video>
       </body>
    </html>
    <html>
       <body>
          <video scr="paddle.webm"  poster="paddle.jpg" ></video>
       </body>
    </html>

    6,阻止视频预加载

    <html>
       <body>
          <video scr="paddle.webm" preload=“none” controls></video>
       </body>
    </html>

    7,使用多种来源的视频和备用文件

    <body>
    <
    video width="369" height="208" controls> <source scr="paddle.mp4" type="video/mp4"> <source scr="paddle.webm" type="video/webm">

    </video>
    </body>

    8,提供可访问性

    9,音频文件格式

    .ogg  .mp3  .wav   .aac  .mp4  .opus

    10,在网页中添加带控件的单个音频文件

    <body> 
      <audio scr="pinao.ogg" controls></audio>
    </body>

    11,自动播放,循环和预加载音频

    ......
     <body> 
        <audio scr="pinao.ogg"  autoplay controls></audio>
     </body>
    <html>
    ......
     <body> 
        <audio scr="pinao.ogg"  loop controls></audio>
     </body>
    <html>
    ......
     <body> 
        <audio scr="pinao.ogg"  preload="metadate" controls></audio>
     </body>
    <html>

    12,提供带备用内容的多个视频源

    1 <body>
    2     <audio controls>
    3         <source scr="pinao.ogg" type="audio/ogg">
    4         <source scr="pinao.mp3" type="audio/mp3">
    5     </audio>
    6 </body>

     13,添加备用Flash的视频和音频

    <body>
      <video width="369" height="208" controls>
          <source scr="paddle.mp4" type="video/mp4">
          <source scr="paddle.webm" type="video/webm">
    
     </video>
    </body>

     

  • 相关阅读:
    狭隘试试
    安装django
    青岛大学开源OJ以及部署
    十三、用户名密码管理
    十二、文件权限及所属主组的修改
    十一、tar打包命令的使用
    十、文件管理、属性、查找和软硬链接
    九、系统优化方法(基础优化)
    八、系统登陆信息的显示和硬件信息等
    七、常用基础配置
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5080435.html
Copyright © 2011-2022 走看看