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>

     

  • 相关阅读:
    使用net start mysql的时候出现服务名无效的原因及解决办法
    Appium的安装
    cpu
    单例模式
    Java中Synchronized的用法(简单介绍)
    java随机数Reandom(简单介绍)
    多线程面试题
    线程和进程有什么区别(简单介绍)
    java多线程(简单介绍)
    servlet三种方式实现servlet接口
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5080435.html
Copyright © 2011-2022 走看看