Question

在开始播放视频之前，我想要readyState为4，因为：

我正在尝试为我的网站创建加载屏幕。我已经把一切都搞定了，但是他们的这种奇怪的偶然事件必须让一个视频发挥作用以陶醉它readyState或它不会发射。如何在不播放视频的情况下缓冲视频;当readyState命中4时启动视频？ HTML：

<video id="menu-video" loop  controls video-loader preload="auto">
  <source src="../../images/clouds.mp4" type="video/mp4">
</video>

JS：

var readyLock = false;
    angular.element(document).ready(function() {

         var readyLock = false;
    var playing = true;
    var tempPlay = false;
    angular.element(document).ready(function() {

        var el = {
            video:    element.find('video')[0],
            canvas:   element.find('canvas')[0],

        };
        //wanted to play the video
        if(playing){
            el.video.play();
            tempPlay = true;
        }
        // pause to trick the buffer
        if(tempPlay){
           el.video.pause();
           tempPlay = true;
        }
        //when all this is true than play that video
        if(el.video.readyState === 4 && !readyLock && !tempPlay) {
            el.video.play();
            readyLock = true;
        }

        var context = el.canvas.getContext('2d');
        var cw = Math.floor(el.canvas.clientWidth );
        var ch = Math.floor(el.canvas.clientHeight);
        el.canvas.width = cw;
        el.canvas.height = ch;

        el.video.addEventListener('play', function(){
            draw(this,context,cw,ch);
        },false);



    }, false);
    function draw(v,c,w,h) {
        if(v.paused || v.ended) return false;
        c.drawImage(v,0,0,w,h);

        if(v.readyState === 4 && !readyLock) {
            console.log('ready');
             $scope.$emit('load::2');
            readyLock = true;
        }

        var grd = c.createLinearGradient(0,0, w,h);
        grd.addColorStop(0,"hsla(268,92%,19%,.9)");
        grd.addColorStop(1,"hsla(30,100%,50%,.9)");
        c.fillStyle = grd;
        c.fillRect(0,0,w,h);
        c.globalCompositeOperation = "color";
        setTimeout(draw,20,v,c,w,h);
    }

MainCtrl：

 var load = false;
    var loaded = []
    angular.forEach(['load::1', 'load::2', 'load::3', 'loaded::video'], function (value)        {
       $scope.$on(value, function (event) {
           load = true;
           loaded.push(true);

            if (load === true ) {
                console.log('+20');
                load = false;
            }

            if (loaded[0] === true && loaded[1] === true && loaded[2] == true && loaded[3]) {
                console.log('loaded');
            }
       });
    });

Answer 1

继承人的回答

            el.video.addEventListener("loadedmetadata", function(){
                el.video.play();
            }, false);

你可以在暂停时检测到视频的readyState吗？

1 个答案: