html5之video-蒲公英云

html5之video

Bertha 。 2021-06-24 14:34 633阅读 0赞

<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webM" />
    <source src="video.ogv" type="video/ogg" />
    <p>Your browser does not support the video tag.</p>
</video>

video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！

HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介。（在video标签上使用controles属性后，播放器就已经自带了暂停、音量、进度等空控制功能）

1、使用jquery获取video

var video = $('#videoID');

2、控制播放、暂停：

$('.btnPlay').on('click', function() {
     if(video[0].paused) {
        video[0].play();
     }
     else {
        video[0].pause();
     }
     return false;
};

3、控制音量、静音：

//Mute/Unmute control clicked
$('.muted').click(function() {
   video[0].muted = !video[0].muted;
   return false;
});
//Volume control clicked
$('.volumeBar').on('mousedown', function(e) {
   var position = e.pageX - volume.offset().left;
   var percentage = 100 * position / volume.width();
   $('.volumeBar').css('width', percentage+'%');
   video[0].volume = percentage / 100;
});

4、快进、快退、倒带：

//Fast forward control
$('.ff').on('click', function() {
   video[0].playbackrate = 3;
   return false;
});
//Rewind control
$('.rw').on('click', function() {
   video[0].playbackrate = -3;
   return false;
});
//Slow motion control
$('.sl').on('click', function() {
   video[0].playbackrate = 0.5;
   return false;
});