zoukankan      html  css  js  c++  java
  • 第181天:HTML5——视频、音频

    一、HTML5新增的videosource标签

    1 <video width="320" height="240" controls="controls“ poster="/images/w3school.gif"> 
    2       <source src="movie.ogg" type="video/ogg"> 
    3       <source src="movie.mp4" type="video/mp4"> 
    4       您的浏览器不支持video标签 
    5 </video> 

    二、HTML5支持的视频格式

    三、video标签的属性

    四、HTML5的音频标签

    1 <audio src="好久不见.mp3" autoplay controls>
    2          您的浏览器不支持 audio 标签。
    3 </audio>

    HTML5支持的音频格式 .wav .mp3

    五、音频标签的属性

    六、浏览器默认播放控件

     1 <!DOCTYPE HTML>
     2 <html>
     3     <head>
     4     <script>
     5     window.onload=function  () {
     6          var playbtn=document.getElementById("play");
     7          var video=document.getElementById("video");
     8          playbtn.onclick=function  () {
     9                video.play();
    10          }
    11     }
    12     </script>
    13     </head>
    14     <body>
    15       <video controls=controls  loop =loop poster="1.jpg" id="video">
    16         <source src="iceage4.mp4"></source>
    17         <source src="iceage4.webm"></source>
    18       </video>
    19       <input type="button" value="播放" id="play"/>
    20       <audio src="fcml.mp3" controls=controls >
    21       </audio>
    22     </body>
    23 </html>

    七、自定义播放控件相关API

    video.webkitRequestFullScreen() : 全屏

    video.paused : 布尔值,是否暂停

    video.play() : 播放

    video.pause() : 暂停

    事件:

    timeupdate : 当前播放位置发生改变时产生该事件

    video.currentTime :当前播放的时间,单位秒

    video.duration: 返回总时间,单位秒

    video.muted: 布尔值,是否静音

    video.volume() : 设置音量

    八、Video更多API参考

    九、Video的API属性

    十、Video的事件

  • 相关阅读:
    学习《Spring 3.x 企业应用开发实战》Day-1
    java面试32问
    线程的同步和异步
    TCP和UDP的区别
    深入理解Spring系列之四:BeanDefinition装载前奏曲
    深入浅出JDK动态代理(一)
    和大牛之间的差距
    深入理解Spring系列之三:BeanFactory解析
    深入理解Spring系列之二:BeanDefinition解析
    深入理解Spring系列之一:开篇
  • 原文地址:https://www.cnblogs.com/le220/p/8488689.html
Copyright © 2011-2022 走看看