Question

您好我正在使用html5视频标签。我使用-webkit来使用pinterest类型的布局。我在显示视频时遇到问题。视频仅显示在第一列中，第二列和第三列中未显示视频。但我可以听到确认视频工作正常但有些阻塞的音频。我尝试删除webkit并尝试更改布局，但所有视频都正常工作。

这是我的css。

<style type="text/css">
    #wrapper1 {
        width: 90%;
        max-width: 1100px;
        min-width: 800px;
        margin: 50px auto;
    }

    .pin1 {
        display: inline-block;
        background: #FEFEFE;
        border: 2px solid #FAFAFA;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        margin: 0 2px 15px;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
        padding: 15px;
        padding-bottom: 5px;
        background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
        opacity: 1;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
        z-index: 10;
    }

        .pin1:hover {
            background-color: #F3F5D5;
        }

    #columns1 {
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        -webkit-column-fill: auto;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        -moz-column-fill: auto;
        column-count: 3;
        column-gap: 15px;
        column-fill: auto;
        z-index: 10;
    }
</style>


  <div id="wrapper1">
        <div id="column1">
            <div class="pin1">
                <video id="Video1" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video2" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="540" style="z-index: 2; vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video3" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="340" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video4" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video5" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video6" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>``

有人可以帮助我。

Answer 1

当我有一个webkit-column-count时，我遇到了同样的问题，链接无效，特别是在Chrome中。事实证明，将webkit-backface-visibility设置为以某种方式隐藏导致我的链接不起作用。一旦我从CSS中删除它，他们就开始重新工作了。你可以尝试，看看它是否修复它。

-webkit-column-count 3，仅在第1列中运行视频，在第3列和第3列中没有视频

1 个答案: