我有一个由用户滚动控制的视频,这在 safari 上效果很好,但在 chrome 上它会滞后并点对点跳转,而不是流畅地播放。 这是我的视频文件的问题还是与我的 chrome 有关?

链接到示例: https : //advancedriderwear.com/Updates/Feature-Test/Video/

代码:

HTML:

<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<div class="video-stick">
    <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="Beast_exploding_animation.mp4"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="Beast_exploding_animation.mp4"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Beast_exploding_animation.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
</div>

CSS:

body{
    background: black;
}

.space{
    height: 100vh;
    width: 100%;
    background: black;
}

#video-stick{
    position: relative;
    text-align: center'
}

#set-height {
    display: block;
    height: 9000px;
}
  #v0 {
    position: fixed;
    top: 50px;
    height: 80%;

    margin: auto;
  }

  #time {
    position: fixed;
    display: block;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(0,0,255,0.5);
  }
  #scroll {
    position: fixed;
    display: block;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(255,0,0,0.5);
  }

JS:

// select video element
    var vid = document.getElementById('v0');
    var time = $('#time');
    var scroll = $('#scroll');
    var windowheight = $(window).height()-20;


    var scrollpos = window.pageYOffset/400;
    var targetscrollpos = scrollpos;
    var accel = 0;


    // ---- Values you can tweak: ----
    var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

    // pause video on load
    vid.pause();

    window.onscroll = function(){
        //Set the video position that we want to end up at:
        targetscrollpos = window.pageYOffset/400;

        //move the red dot to a position across the side of the screen
        //that indicates how far we've scrolled.
        scroll.css('top', 10+(window.pageYOffset/5000*windowheight));
    };


    setInterval(function(){  

        //Accelerate towards the target:
        scrollpos += (targetscrollpos - scrollpos)*accelamount;

        //move the blue dot to a position across the side of the screen
        //that indicates where the current video scroll pos is.  
        time.css('top', 10+(scrollpos/5000*400*windowheight));

        //update video playback
        vid.currentTime = scrollpos;
        vid.pause();

    }, 40);

  ask by Marcus translate from so

本文未有回复,本站智能推荐:

1回复

无法在浏览器上播放MP4视频

我正在创建视频管理。 但是,当视频将加载。 不要加载。 我正在使用video.js,但无法加载本地文件。 在这里测试: http : //thatupload.com/videos/video.MP4 在本地主机有相同的错误。 此错误: http : //i.snag
1回复

无法在浏览器中播放mp4视频

我很难让mp4视频在浏览器窗口中播放。 我对html相当陌生,并且我一直在进行大量研究以试图弄清为什么它不起作用。 现在它只是给我一个空白的视频播放器这是我的代码 谢谢
1回复

Math.random javascript 与 .mp4

我有大约 2-3 个 .mp4 文件,我希望它们在每个页面加载时随机显示。 例如,如果有人要访问我的网站,我会尝试从源代码中列出的 3 个 .mp4 文件中选择 1 个。 我想我可以以某种方式使用 javascript,但我不太确定。 这是我到目前为止所得到的 #vid { posi
1回复

安装QuickTime后,Chrome无法播放mp4

我正在为不支持<video>旧浏览器设计一个网页。 这是我的代码: 它在Chrome中完美运行。 但是,当我使用Firefox进行测试时,它会要求我安装QuickTime 7 。 安装QuickTime 7 ,Chrome突然无法播放这三个标签中的任何视频。 请参见下
6回复

.mp4 文件不在 Chrome 中播放

我想在我的网站上播放视频。 我创建了一个 .mp4 文件并使用 HTML5 视频标签将其添加到 html。 问题是它没有显示在 chrome 中。 我也想知道如何一次又一次地重播。
3回复

MP4视频无法在移动设备和Chrome上播放吗?

下面的代码正在桌面Safari浏览器上播放.mp4(编解码器:H.264,AAC,种类:MPEG-4电影,通过Quicktime创建)文件,效果很好: 但是,在iPhone / iPad Safari浏览器上尝试播放时,单击播放后没有任何反应。 另外,Chrome浏览器没有播放视频,中
1回复

视频海报延迟播放

我想弄清楚如何延迟播放我的“动画”视频。 它需要有一个透明的背景并且没有控制器,所以就像一个 gif。 我认为视频是唯一的解决方案,但是现在它要么循环运行,要么运行一次。 示例图像: 也尝试使用间隔,但我没有让它正常工作。 如果有人有任何提示,将不胜感激。 干杯,
1回复

如何在 HTML、CSS3 中添加预加载器 GIF/MP4

早些时候我使用微调器加载我的网站。 我想把它改成视频所以我想编辑以前的代码,所以我应该怎么做才能删除微调器并添加视频 css 链接中的视频是https://techcraze.co.in/wp-content/uploads /2021/03/topp.mp4请帮助我在此链接的帮助下放置视频我的 h