0

当我确定这应该很容易时，我很难弄清楚这一点。所以，我在我正在开发的网站上有一个视频。我希望这个视频在开始播放时调整为不同的 CSS（更大的宽度/高度），并在暂停时调整回正常大小（删除 CSS）。我该怎么做呢？我通过添加/删除 CSS 尝试了带有切换功能的 jQuery。但是，单击时会发生调整大小，而我希望在它开始播放时拥有它。有没有办法做到这一点？

代码是

<section>

<video controls preload="metadata" onclick="this.paused ? this.play() : this.pause();">
</video>

</section>

CSS

section video {
    float: left;
    width: 50%;
    max-height: auto;
}

.largevideo {
    float: left;
    width: 100%;
    max-height: auto;
}

<script>

$(document).ready(function(){
    $("section video").click(function(){
        $("section video").toggleClass("largevideo");
    });
});

</script>

这可行，唯一的问题是当我单击“播放”按钮时，视频不会变大。所以我想我要么将相同的功能应用于“播放”按钮，要么将功能标记为视频开始播放的时间。

谢谢

4

0 回答 0