当视频为95%HTML5播放器时显示div

时间:2014-08-13 17:47:31

标签: html5

我正在尝试以95%的视频播放时间进行div显示,有人可以帮我这个吗? HTML5播放器

1 个答案:

答案 0 :(得分:1)

使用'timeupdate'html5媒体事件 - http://jsfiddle.net/m3orwedL/1

JAVASCRIPT

(function() {

    var video_el, percentage;

    function init() {

        video_el = document.createElement('video');
        video_el.src = "http://jspro.brothercake.com/media-events/media/BadgerWatch.mp4";

        video_el.setAttribute("controls", true);
        console.log(video_el);

        video_el.addEventListener('timeupdate', checkTime); 

        document.body.appendChild(video_el);

    }

    function checkTime() {
        percentage = video_el.currentTime / video_el.duration * 100;
        console.log(Math.round(percentage) + '%');

        if(percentage >= 95) {
            alert('video is at 95%!');
            video_el.removeEventListener('timeupdate', checkTime); 

        }
    }

    window.addEventListener('DOMContentLoaded', init);

}).call();