问题描述
我正在尝试在滚动时模拟视频播放。 这是我使用的参考:https://codepen.io/ollieRogers/pen/lfeLc/
在大多数浏览器中一切正常,但在 Safari iOS 上无法显示视频。
我不确定这是否与视频编解码器或导出有关,或者与用于滚动播放视频的任何参数有关。
我开始认为这与无缝/自动播放视频播放有关,因为放置没有任何这些功能的普通视频效果很好。
这是目前的代码:
<style>
.section--sequence {
width: 100vw;
display: block;
}
#v0 {
position: sticky;
position: -webkit-sticky;
top: 58px;
left: 0;
width: 100%;
object-fit: cover;
height: 100vh;
outline: none;
@include respond-to(smartphone) {
top: 46px;
}
}
</style>
<div id="videoSequence" class="section--sequence scroll-sequence__container">
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload" muted>
<source type="video/mp4" codecs="avc1.4D401E,mp4a.40.2" src="video.mp4"></source>
<source type="video/webm" codecs="vp8.0,vorbis" src="video.webm"></source>
<source type="video/ogg; codecs="theora,vorbis"" src="video.ogv"></source>
</video>
</div>
<script>
var frameNumber = 0,// start video at frame 0
// lower numbers = faster playback
playbackConst = 500,// get page height from video duration
setHeight = document.getElementById("videoSequence"),// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedMetadata',function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)