1. 程式人生 > >H5新特性之video audio

H5新特性之video audio

video += duration ror ner bsp ren 當前 默認

1.標簽

<video src="~~~" autoplay loop controls poster="~~~.jpg">
    你的瀏覽器不支持video~~
</video>

值得註意的就是這幾個屬性,autoplay(自動播放)、loop(循環播放)、controls(默認視頻操作控件)、poster(封面)

2.js接口

//播放、暫停
video.paused?video.play():video.pause();

// 音量、靜音
video.volume += x; // 1>x>0;
video.muted = true; //true就是靜音

//
播放速度 video.playbackRate = x; //x是倍數 //視頻當前時間、總時間 video.currentTime; video.duration; //全屏播放(非標準) video.webkitRequsetFullScreen(); video.webkitExitFullScreen();//退出全屏 //時間改變事件 video.addEventListener(‘timeupdate‘,function(){ //當video.currentTime發生變化時觸發 })

當然還有一些常用事件例如‘canplay’、‘waiting’、‘ended‘、‘error’。

ps:audio和video的操作是一模一樣的,但是audio沒有video的poster屬性。

H5新特性之video audio