最近の投稿を含むInstagramコンテンツのフィードがあります。投稿が動画の場合は、自動再生、ループ、ミュートされた属性のHTML5動画として表示されます。SafariブラウザがHTML5の自動再生動画を表示するようにジャンプします
審美的に結果は非常に満足です。しかし、Safariでは、ビデオの読み込みが完了すると、ブラウザはWebページをビデオの位置までスキップします。 Chromeではこれが行われません。
ビデオはメインコンテンツではありませんので、ページをスキップする必要はありません。
質問
自動再生のためのW3C標準はありますか？デフォルトのアプローチを採用しているサファリまたはクロムです
これを改善する最善の方法は何ですか？私は自動再生をオフにして、代わりにJSでプレーを引き起こす可能性がsoultion
上
思考。しかしこれは少し不必要で、新しい依存関係を作り出します。
*更新：リミットスクロール長さを1500台に2秒までのビデオの再生開始後...
<html>
<head>
<script type="text/javascript">
var scrollPosition = 0;
var videoLoaded = false;
function bodyOnScroll() {
// this 1500 value might need to be tweaked less or more depending
// on how far the scroll to your video is
if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded)
{
// don't scroll
document.body.scrollTop=scrollPosition;
}
else
{
// reload the variable to match current position
scrollPosition=document.body.scrollTop;
}
}
function videoOnPlaying(){
// wait 2 seconds and then disable the max scrollPosition
// might want to tweak this too depending
setTimeout(function() {
videoLoaded = true;
}, 2000);
}
</script>
</head>
<body onScroll="bodyOnScroll();">
<video autostart onPlay="videoOnPlaying();"></video>
あなたの貢献のおかげで@pizzasliceちょっと感謝しますUXの意味を理解してください残念ながらあなたの解決策は現在私の問題と同じことを...ビデオの読み込み時にページのどこかに表示されます。 – slawrence10
W3Cが自動再生ビデオは自動的に注力してスクロールする必要がある場合は言っていないようなので、ないんそれが正しいか間違っていると思う。私の好みは自動再生を取り除いて、ユーザーがビデオを開始するようにすることです - ユーザーは常に最初からビデオを見て、帯域幅の使用を制御します。 – Offbeatmammal
ありがとう@Offbeatmammal私はUXの意味を認識しています。サファリがこれを強制するように思われることを迷惑をかける。 – slawrence10
私は、私が取り組んでいるウェブサイトで同じ問題を抱えてきました。自動再生の属性を削除して、JSでタイムアウトした後に再生するように動画をトリガーしました。しかし、ビデオが再生されるとすぐに、Safariは以前と同じようにビデオに戻ってジャンプします。 –