小编Gla*_*ulz的帖子

如何在网站上两次显示相同的HTML 5视频而不加载两次?

我目前在html页面上有2个视频元素.
两者都嵌入了.mp4来自同一网址的完全相同的视频.

有没有办法告诉浏览器从第一个视频元素复制渲染的视频,而不是让浏览器下载两个视频?

您可以清楚地看到这两个视频是分开加载的,因为它们有时会在播放前有不同的缓冲时间,并且每次视频都不会同步播放.

我的代码:

<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

<video autoplay id="bigVideo"     data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
Run Code Online (Sandbox Code Playgroud)

html javascript video html5

7
推荐指数
2
解决办法
3506
查看次数

禁用预测滚动 - 鼠标滚轮(OnScroll)事件频繁触发(触摸板) - JS

我正在执行javascript onScroll.我的代码适用于任何普通的电脑鼠标,但当我使用我的笔记本触摸板时,我遇到以下情况:

  • 当手指移动方向盘时,我的鼠标会触发(大约1到8个)鼠标滚轮事件.
  • 我的触控板发出更多(约60)鼠标滚轮事件,而两根手指触摸打击垫,并在我的手指再次在空中后继续发射.

我从移动触摸设备了解这种行为.该功能称为"预测触摸" - 如果您的手指移动在提升之前有足够的加速度,则滚动会继续.

我认为触摸板驱动程序正在设置这种"平滑滚动"行为.

为了调试这种情况,我使用了以下代码:

/* Handle Mouse-Wheel Scrolling */
var lastChange = +new Date();
$(window).bind('mousewheel',    function(e){
    console.log("mw");
    if(+new Date() - lastChange > 1000){
        console.log("mw allowed");
        if(e.originalEvent.wheelDelta > 0)  {/*go to previous*/}
        else{   /*go to next*/}
        lastChange = +new Date();
    }
return false;});
Run Code Online (Sandbox Code Playgroud)

这是一个简单的代码,每秒"允许"一次鼠标滚动事件.

如果我进行快速触摸板滚动,鼠标滚轮事件将被触发约300次.一秒钟的条件是让3个事件发生.我的手指在触摸板上的时间不到一秒钟.

通过这个测试,我发现即使我的手指已经离开触摸板,鼠标滚轮事件仍会被触发(几乎连续持续3秒).

是否有Javascript函数或变通方法/技巧/黑客来避免这种行为?

可能是触摸板的"onTouchEnd"事件?

javascript jquery javascript-events mousewheel touch

6
推荐指数
1
解决办法
3430
查看次数

标签 统计

javascript ×2

html ×1

html5 ×1

javascript-events ×1

jquery ×1

mousewheel ×1

touch ×1

video ×1