Q&A
#動画ポータルサイトを製作しています
WPで動画ポータルサイトの構築を行っています。
トップページには各投稿のサムネイルがあるところまではオーソドックスなサイトですが、
そのサムネイルにマウスオーバーすると、カスタムフィールドに格納しておいた各投稿の動画(mp4)が再生するような仕様にしたいと思っています。
経験も少ない自分の考えでは、こんなフローなら実現できるのではないかと思っています。
1.カスタムフィールドに動画を格納しておく
2.CSSでPHPを読み込めるようにしておく
3.マウスオーバーすると(a:hover)、backgroundで動画を再生する
というような仕組みが思い浮かびました。
#質問
CSS3では、背景に動画を設定することは可能なのでしょうか？
また、それ以外の方法でマウスオーバーで動画が再生する仕組みが思い浮かぶ方がいましたら、ぜひアドバイスをお願いします。
#【追記】現在のコード
PHP
1【front-page.php】 2<?php if ( has_post_thumbnail() ) { ?> 3<?php if ( get_post_meta( get_the_ID(), 'video', true ) ) : ?> 4 <div class="stage"> 5 <video class="v" autoplay loop poster="<?php thumbnails_url();?>"> 6 <source src="<?php echo get_post_meta( get_the_ID(), 'video', true ) ?>" alt="<?php the_title(); ?>" /> 7 </video> 8 </div> 9<?php endif; ?> 10 <?php } else { ?> 11 <div class="featured-thumbnail"> 12 <img src="<?php echo get_template_directory_uri(); ?>/images/nothumb.png" class="attachment-featured wp-post-image" alt="<?php the_title(); ?>"> 13 </div> 14 <?php } ?>
PHP
1【header.php】 2・・・省略・・・・ 3<script> 4$(document).on({ 5 mouseenter:function(){ 6 $(this).find('.v')[0].play(); 7 }, 8 mouseleave:function(){ 9 $(this).find('.v')[0].pause(); 10 } 11},'.stage'); 12</script> 13</head>
かなり近いところまで来ました。
if カスタムフィールドに動画が格納してあれば
→サムネイルを表示し、動画が再生
endif
という状態にすることができました
#【追記】現在詰まっているところ
マウスオーバーしていないのに画面のロードが完了した瞬間に動画が再生されてしまいます。
また、マウスを離すと、再びサムネイルが見えるようにはできそうでしょうか？
回答1件
0
ベストアンサー
CSS の background-image などには動画を再生する機能はありません。
最近はvideoタグを使った実装が多いのではないでしょうか。
【[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法） | コリス】
http://coliss.com/articles/build-websites/operation/css/fullscreen-background-video-used-html5-by-demosthenes.html
【背景に動画を使ったWebサイトの作り方 | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/video-background/
【ASCII.jp：マウスホバーで動き出す動画ページの作り方 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン】
http://ascii.jp/elem/000/000/933/933503/
投稿2016/06/30 17:18
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/30 17:21
2016/07/03 11:35
2016/07/03 12:02
2016/07/03 17:03
2016/07/03 17:29