Question

我目前在Chrome中遇到了一种奇怪的行为。基本上，我要做的是将视频置于其他视频之上。

我有一个位于基础层的基本视频（z-index：0）。它一直在重复。当用户执行某些操作（单击按钮等等）时，另一个在单击按钮之前不可见的视频应该在另一个视频的顶部淡入。

在Firefox（fe）中，一切正常。在Chrome中没有任何反应。在淡出动画耗尽的时间之后，不会立即显示淡出的视频。

我设置了一个小提琴。正如您所看到的，1000毫秒正在运行，之后，顶部视频直接显示而不会淡入。尝试在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会像那样。

提前致谢，托马斯

Answer 1

在适当/必要时使用不同的ID和类将帮助您找出问题。我在这里提供的jsfiddle中清理了它：http://jsfiddle.net/bas5D/2/

不要尝试使用.fadeIn()和.fadeOut()视频元素，只需应用css类，确保元素上有适当的位置，让CSS完成淡化视频的工作。

Answer 2

添加

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

到

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

查看the jsfiddle i created以查看正在进行中。

Answer 3

我只是想出了这个问题的来源。有些人甚至没有问题，因为chrome上的视频透明度仅适用于启用gpu加速。如果您的计算机不支持GPU加速，则不透明度始终为100％

HTML5视频 - 淡化效果无法在Chrome上运行

3 个答案: