时间戳

首页 > 解决方案 > 悬停时预加载视频

javascript - 悬停时预加载视频

问题描述

我想在用户悬停链接时预加载视频。（该链接会将您带到一个新页面，并且视频不在带有链接的页面上）。目前，当用户单击链接时，视频加载前会有短暂的暂停 - 我想删除此暂停。当用户悬停链接时，似乎是下载视频的好机会，这样如果他们决定点击链接，他们的体验会更流畅。

缺点：用户可能不会点击链接，浪费带宽
优点：更流畅的体验

我尝试在目标页面的视频标签上使用预加载。这没有帮助。

如何预加载视频

我还尝试将视频嵌套在链接中，隐藏，将 preload 设置为 false，然后使用一些 JS 在悬停时将 preload 切换为 auto/true - 这不会提前下载文件 - 我认为是 DOM此时已经构建并且更改已被拾取。

的HTML：

<a class="preload" href="link.html">
<h4>Title</h4>
<p>Text</p>
<video class="hide" src="vid.mp4" preload="false">
</a>

JS：

$('.preload').mouseenter(function(){
     var vid = this.childNodes[5];
     vid.preload = true;
});

视频预加载更改为“真”（或“自动”），但在 Chrome 网络选项卡中，视频未下载。

那么 - 根据用户意图（悬停）预取该视频的好方法是什么 - 这是一个坏主意吗？我读过一些帖子说这对于从不点击链接的潜伏者来说可能是一种消耗！

标签： javascriptvideopreload

解决方案

推荐阅读