时间戳

首页 > 解决方案 > 视频使整个网站崩溃

html - 视频使整个网站崩溃

问题描述

我正在为一个以 angular 8 开发的网站开发一个项目，我在网站的标题上有一个视频，视频重约 13mb，每次用户进入页面时都会加载。

问题是这个视频消耗了大量的内存和cpu内存，有时甚至浏览器崩溃。

这发生在所有浏览器（IE、chrome、mozila）以及功能强大的计算机（i7、16gb ram）上。

有谁知道如何提高视频性能？

要播放我正在使用 html<video>标签的视频，下面是我正在使用的代码。

<div class="tp-caption tp-fade fadeout fullscreenvideo" data-x="0" data-y="0" data-speed="1000" data-start="1100" data-easing="Power4.easeOut" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1500" data-endeasing="Power4.easeIn" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true" data-volume="mute" data-forcecover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 0;">
    <video class="" preload="none" width="100%" height="100%" poster="assets/videos/test.png">
        <source src="assets/videos/testvideo.mp4" type="video/mp4" />
    </video>
</div>

谢谢。

标签： htmlangularvideo

解决方案

我通过将视频格式从 .mp4 更改为 .webm 格式解决了我的问题。

这给了我更小的视频尺寸和更好的性能。

推荐阅读