HTML5视频-褪色效果不适用于Chrome

HTML5 Video - Fading Effects not working on Chrome

本文关键字：不适用 适用于 Chrome 视频 褪色 HTML5      更新时间：2024-04-28

我目前在Chrome中面临一个奇怪的行为。基本上，我想做的是，把视频放在其他视频之上。

我有一个基本的视频，它在基层（z索引：0）。它一直在重复。当用户执行某些操作（单击按钮等）时，在单击按钮之前不可见的另一个视频应在其他视频的顶部淡出。

在Firefox（fe）中，一切都很正常。在Chrome中，什么都不会发生。淡出动画的时间用完后，顶部视频立即出现，而不是淡出。

http://jsfiddle.net/J36nQ/

我架起了一把小提琴。正如你所看到的，1000ms正在经历低谷，之后，顶部的视频会直接显示，而不会褪色。在Firefox中尝试这样做会成功地褪色动画。

这就是我迄今为止所尝试的：

<!DOCTYPE html>
<html>
<head>
    <title>Video Test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0; 
        }
        .video{
            position: absolute;
        }
        #video{
            z-index: 0;
        }
        #action-1-wrapper{
            z-index: 1;
            display: none;
        }
        button{
            position: absolute;
            bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $action1 = $('#action-1').get(0);
            $mainVid = $('#main-video').get(0);
            $('#play1').click(function(){
                // Main Video should be paused when playing a video on top
                stopMainVideo();
                // I fade in the container which holds the video
                $('#action-1-wrapper').fadeIn(1000, function(){
                    // After fading in the video in the top wrapper should be played
                    $action1.play();                
                });
            });
            $('.actionvideo').bind('ended', function(){
                var $video = $(this).get(0);
                $video.currentTime = 0;                 
                $(this).parent().fadeOut(1000, function(){
                    playMainVideo();
                });
            });
            function stopMainVideo()
            {
                $mainVid.pause();
            }
            function playMainVideo()
            {
                $mainVid.play();
            }
        });
    </script>   
</head>
<body>
    <div id="video" class="video">
        <video autobuffer width="100%" autoplay="autoplay" loop="loop" id="main-video">
            <source src="https://workid-service.de/samplevids/loop.mp4" type="video/mp4" />
        </video>        
    </div>
    <div id="action-1-wrapper" class="video">
        <video autobuffer width="100%" id="action-1" class="actionvideo">
            <source src="https://workid-service.de/samplevids/aktion1.mp4" type="video/mp4" />
        </video>        
    </div>
    <button id="play1">Animation 1</button>
</body>
</html>

我希望有人能给我一个提示为什么chrome会这样。

提前感谢，Thomas

在适当/必要的地方使用不同的ID和类将大大帮助您解决问题。我已经在这里提供的jsfiddle中清理了它：http://jsfiddle.net/bas5D/2/

与其尝试.fadeIn()和.fadeOut()视频元素，只需应用一个css类，确保元素上有宽松的地方，并让css来淡化视频。

只需添加

$("#action-1").attr("style", "");

到

$('#play1').click(function(){});

看看我创建的jsfiddle，看看它正在进行中。

我刚刚弄清楚这个问题是从哪里来的。你们中的一些人甚至没有这个问题，因为chrome上的视频透明度只有在启用gpu加速的情况下才能工作。如果您的计算机不支持GPU加速，则不透明度始终为100%

相关文章：