変更html5背景ビデオソース

ウィンドウのサイズに応じて背景ビデオソースを変更したいと思います。ナビゲーショントラフィックを最小限に抑えるために、私はCSSを通してビデオを変更したくありません。変更html5背景ビデオソース

私はこれを実行しようとしました：

<script> 
function chsrc() { 
    var larghezza_browser = window.innerWidth || document.body.clientWidth; 
    if (larghezza_browser > 1540) { 
     console.log('carico il video grande - larghezza: ' + larghezza_browser + 'px'); 
     document.getElementById("mp4_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_grande.mp4"; 
     document.getElementById("webm_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_grande.webm"; 
    } else { 
     console.log('carico il video piccolo - larghezza: ' + larghezza_browser + 'px'); 
     document.getElementById("mp4_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_piccolo.mp4"; 
     document.getElementById("webm_desktop").src="//sullimite.it/wp-content/themes/sullimite/fosco/modella_schermo_piccolo.webm"; 
    } 
} 
</script>

追加<body onload="chsrc()" onresize="chsrc()">は

とHTML：クロームコンソールで

<video autoplay loop muted id="video_home"> 
<source id="mp4_desktop" type="video/mp4" /> 
<source id="webm_desktop" type="video/webm" /> 
</video>

動作しているようですが、私はビデオを見ることができない html chrome developer tools

console log chrome developer tools

私が間違っていることを知っていますか？

おかげ

フォスコあなたはソースがこれを行うに変更した後

出典

2017-08-29 Fosco Ventura

HTMLのメディア要素は、ロードする必要が...

//this line loads the media for the given id 
document.getElementById("webm_desktop").load();

次に、あなたが何かをするoncanplaythroughイベントリスナーを使用することができますメディアが完全にロードされ、ファイル全体を再生することができます。あなた

出典

2017-08-29 15:42:26 SidTheBeard

のために働く必要があり

document.getElementById("webm_desktop").oncanplaythrough( //play the video here //do something here too if you want );

申し訳ありませんが、私はあなたが私に示唆されているものを行う方法を理解していません。 –

@FoscoVentura私の編集を参照してください。私は2つの行をより詳細に説明します。 – SidTheBeard

あなたの言ったことはできませんが、webM_desktopからvideo_homeにgetElementByIdを変更する問題を解決しました。私もmp4を削除し、webmだけを使用しました –

変更html5背景ビデオソース

答えて

関連する問題