Explain in detail the basic usage of Video

loop (loop playback)

width (width of video)

height (height of video)

src (address of video)

video.currentTime (playing event of current video)

video.duration (total duration of video playback)

3, common events ( Method)

video.play()---play video

video.pause()---pause video playback

4, full screen setting: (note that when setting full screen, the element selection should not be added to the video, otherwise it will appear in full screen The default control may also cause the screen not to be seen when the video is full-screen. Here, please note that the common parent element between all controllers and the video tag when the element is normal)

full screen: element.webkitRequestFullScreen();

element.mozRequestFullScreen();

element .requestFullScreen();

cancel full screen: document.webkitCancelFullScreen();

docu ment.mozCancelFullScreen();

document.cancelFullScreen();

5, set the volume

video.volume The value range is 0-1

If you use input[type='range'], you can set min=0, max=10, In the onchange event, the range value obtained is divided by 10 to indicate the volume size

eg:video.volume = $("input[type='range']").val()/10;

Note: If you need to set the mute mode, directly Set the volume to 0

video.volume = 0;

6, the playback progress

video.currentTime is changed by the timeupdate event of the video, so when setting, we need to add the event video.addEventListener("timeupdate" when the value changes ",playTime,true);

eg1:

$("playRange").on("change",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

eg2:

$("playRange"). on("mousedown",function(){

vdo.removeEventListener("timeupdate",playTime,true);

$(this).on("mouseup",function(){

// alert($(this).val ())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

})

playTime method is used to set the display playback event and the current playback progress Match with range

function playTime(){

var nowTime = parseInt(vdo.currentTime);

$("playRange").val(nowTime);

$(".playTime").html(nowTime+"/"+allTime);

}