H5新特性：video与audio的使用

HTML5 DOM 为

这些方法、属性和事件允许您使用 JavaScript 来操作

·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，

HTML5支持的视频格式：
- Ogg
  - 带有Theora视频编码+Vorbis音频编码的Ogg文件
  - 支持的浏览器:F、C、O
- MEPG4
  - 带有H.264视频编码+AAC音频编码的MPEG4文件
  - 支持的浏览器: S、C
- WebM
  - 带有VP8视频编码+Vorbis音频编码的WebM格式
  - 支持的浏览器: I、F、C、O
  - 劣势：视频少、转码器几乎没有，不好转码
想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

指定一种视频格式，不能播就提示
<video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持videovideo>

给定多种视频格式，浏览器根据自身支持程度选择播放哪一种

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

  <video controls = “controls”>

   <source src=”1.mp4” type=”video/mp4” />  //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”

   <source src = “2.ogg” type=”video/ogg” />  //ogg格式

   <source src=”3.webm” type=”video/webm” />   //webm格式

video>

    controls    是否显示播放控件
    autoplay    是否打开浏览器后自动播放
    width          设置播放器的宽度
   height         设置播放器的高度
    loop           设置视频是否循环播放
    preload       设置是否等加载完再播放
    src url     设置要播放视频的url地址
    poster imgurl 设置播放器初始默认显示图片

     canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
    play()          开始播放音频/视频。
     pause()        暂停当前播放的音频/视频。

    playbackRate    设置或返回音频/视频播放的速度。
     currentTime     设置或返回音频/视频中的当前播放位置（以秒计）。
     duration        返回当前音频/视频的长度（以秒计）。
     loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata事件。
     timeupdate:      时间改变时触发

muted 设置或返回音频/视频是否静音。
volume 设置或返回音频/视频的音量



    
        "UTF-8">
        
    
    
        
        视频地址："text" id="videoUrl" value="http://115.231.144.52/12/v/w/m/y/vwmypxnxothnduooudlozlddkekrrs/hc.yinyuetai.com/E771014D8879E8AA0ED2CBC807F1C2CE.flv?sc=f1cc344f8e1ff11a"/>
        

               

        
        
        
        
        
        
        
        
        

        
        
        
        

        
                     视频长度: "vLength"> 

                     当前时间: "curTime" >
   
                     持续时间: "vRemaining" >

videoAudio

H5新特性：video与audio的使用

相关

标签