0

嗨，我正在使用 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>``

有人可以帮助我吗？

4

1 回答 1

0

当我有一个 webkit-column-count 时，我遇到了同样的问题，链接不起作用，特别是在 Chrome 中。事实证明，以某种方式将 webkit-backface-visibility 设置为 hidden 导致我的链接无法正常工作。一旦我从我的 CSS 中摆脱了它，他们就又开始工作了。你可以试试看能不能解决。

于 2014-09-23T15:25:53.620 回答