html5之video

Bertha 。 2021-06-24 14:34 529阅读 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;
    });

5、video还有loadedmetadata、timeupdate 等事件

6、问题：使用viedo播放视频时，有时只显示黑黑的一块视频区域、声音也可以听见，但是没有播放内容，是什么原因(文件是mp4,在chrome浏览器上)？

video 这个标签的 src 播放文件因浏览器的不同，支持的文件格式也不同。而且video文件必须遵循一定编码（比如：h264等）才可以进行播放的

7、常见的html5播放器：

1）HTML5 Video Player: MediaElement.js          http://mediaelementjs.com/

2）HTML5 Audio, Video and Image Gallery: Multimedia Gallery       http://tympanus.net/codrops/2010/06/24/multimedia-gallery/

等，可以参考：http://justcoding.iteye.com/blog/1169026