質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

0回答

1691閲覧

【WordPress】backgroundの動画が再生されない

ShogoChicago

総合スコア38

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2016/08/22 13:30

編集2016/08/23 04:07

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/23 04:22 編集

WordPressだけでなく、JavaScriptタグやHTML5タグ(タイトル下に表示されるteratailタグのことです)を付けて、JavaScriptおよび出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記いただいたほうが回答を得られやすいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問