WordPressで動画ポータルサイトの構築を行っています。
PCの場合の挙動として、マウスオーバーするとそれぞれの投稿のカスタムフィールドに登録してある.mp4の動画のURLが自動的に再生されるというのを実装しています。
#現在の問題点
トップページではこれまでのすべての投稿のサムネイルが一覧できるようになっています。
現在10個ほど投稿があるので、10個のサムネイルがトップページにある状態なのですが、その一部しか動画が再生されません。
Lazy Loadという遅延ロードのプラグインを試してみましたが、解決しませんでした。
ブラウザが一度に読み込めるファイルサイズの上限などがあったりするのでしょうか?
解決策が思い浮かぶ方がおりましたら、アドバイスをお願いします。
#参考サイト
http://shibushibubu.com/
現在作っているサイトにUIが近いサイトがあります。
このサイトのトップページの「卒業生インタビュー」のようにサムネイルが並んでおり、そのサムネイルにマウスオーバーすると、バックグラウンドで動画が読み込まれます。
拡張子はmp4です。
#【追記】HTMLとjs
サムネイル1つ分のコードと、マウスオーバーした際の挙動のjsを追記します。
HTML
1 <div class="post excerpt "> 2 <header> 3 <a href="http://shogo-cloud.jp/htest/interview010/" title="実力派俳優と呼ばれるまでの苦悩の日々" rel="nofollow" id="featured-thumbnail"> 4 5 <div class="stage featured-thumbnail"> 6 <video class="v" loop muted poster="http://shogo-cloud.jp/test/wp-content/uploads/2016/06/interview10.jpg"> 7 <source src="http://3minute-inc.com/img/bg1.mp4" alt="実力派俳優と呼ばれるまでの苦悩の日々" /> 8 </video> 9 </div> 10 </a> 11 <h2 class="title"> 12 <a href="http://shogo-cloud.jp/test/interview010/" title="実力派俳優と呼ばれるまでの苦悩の日々" rel="bookmark">実力派俳優と呼ばれるまでの苦悩の日々</a> 13 </h2> 14 </header><!--.header--> 15 <div class="readMore"><div class="background"><a href="http://shogo-cloud.jp/test/interview010/" title="実力派俳優と呼ばれるまでの苦悩の日々" rel="bookmark">インタビューを見る</a></div></div> 16 17 </div><!--.post excerpt-->
JS
1$(document).on({ 2 mouseenter:function(){ 3 $(this).addClass('on'); 4 $(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0; 5 $(this).find('.v')[0].play(); 6 }, 7 mouseleave:function(){ 8 $(this).removeClass('on'); 9 $(this).find('.v')[0].pause(); 10 $(this).currentTime = 0; 11 } 12},'.stage'); 13
あなたの回答
tips
プレビュー