HTML5程序设计及实践第6章 HTML5 音频和视频.pptVIP

谢 谢 Thanks for listening. 第6章 HTML5音频和视频 目录 使用audio播放音频 使用video播放视频 使用 DOM 进行视频控制 audio标签 属性 值 描述 autoplay autoplay 音频在就绪后马上播放 controls controls 向用户显示控件，比如播放按钮 loop loop 音乐播放结束后重新播放 preload preload 音频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性 src url 要播放的音频url 格式 IE FireFox Opera Chrome Safari Ogg ? √ √ √ ? MP3 √ √ √ √ √ Wav ? √ √ √ √ audio标签 <audio controls> <source src="Source/videos/rainstill.mp3" type="audio/mpeg"></audio> <source src="Source/videos/song.ogg" type="audio/ogg"></audio> </audio> vedio标签 属性 值 描述 autoplay autoplay 视频在就绪后马上播放 controls controls 向用户显示控件，比如播放按钮 loop loop 视频结束后重新播放 preload preload 视频面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性 src url 要播放的视频 width pixels 播放器的宽度 height pixels 播放器的高度 vedio标签 格式 IE FireFox Opera Chrome Safari Ogv √ √ √ MPEG 4 √ √ √ √ √ WebM √ √ √ 方法 描述 addTextTrack() 向视频添加新的文本轨道。 canPlayType() 检查浏览器是否能够播放指定的视频类型。 load() 重新加载视频元素。 play() 开始播放视频。 pause() 暂停当前播放的视频。 video标签 //播放/暂停 function PlayorPause(){ if(video.paused){ video.play(); } else{ video.pause(); } } //音量增大 function AddVolume(){ if(video.volume < 1){ video.volume+=0.1; } } video标签 //快进 function AddSpeed(){ video.playbackRate+=1; } //设置静音 function SetMuted(){ if(!video.muted){ video.muted = true; document.getElementById("setMuted").value = "取消静音"; } else{ video.muted = false; document.getElementById("setMuted").value = "设置静音"; } } 谢 谢 Thanks for listening.