Warning: Undefined array key 1 in /home/slashd/slashd.com/public_html/blog/wp-content/themes/arkhe_child/functions.php on line 149
このホームページのトップに動画を配置することを決めてから、とても苦労することになりました。
動画の圧縮を行ってもなかなかデータ量が減らないのです。
そこで、動画を2つに分割し静止画とともに3パターンのトップページをランダムに表示することにしました。
動画の分割はQuickTime Player 7で簡単にできます。
その後は、このテーマのhead.phpを書き換えればOKです。
これで1度に読み込まれる動画の重さはほぼ半分になります。
vegasの設定をランダムに
WordPressテーマTCD「UNIQUE」の動画設定はfunctionsフォルダーの中のhead.phpにあります。
以下のようになっています。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/vegas.min.css?ver=<?php echo version_num(); ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/vegas.min.js?ver=<?php echo version_num(); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#header_video").vegas({
timer: false,
slides: [{
<?php if($image) { ?>
src: '<?php echo esc_attr($image[0]); ?>',
<?php }; ?>
video: { src: ['<?php echo esc_attr($video); ?>'], loop: true, mute: true }
}]
});
});
</script>
この部分にランダム変数を発生させて3つのパターンの設定を配置します。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/vegas.min.css?ver=<?php echo version_num(); ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/vegas.min.js?ver=<?php echo version_num(); ?>"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
var random = Math.round( Math.random()*1 ); //0〜1
if (random) {
$("#header_video").vegas({
timer: false,
slides: [{
<?php if($image) { ?>
src: '<?php echo esc_attr($image[0]); ?>',
<?php }; ?>
}]
});
} else { //0のみ
var random2 = Math.round( Math.random()*3 );
if (random2) {
$("#header_video").vegas({
timer: false,
slides: [{
<?php if($image) { ?>
src: '<?php echo esc_attr($image[0]); ?>',
<?php }; ?>
video: { src: ['<?php echo esc_attr($video); ?>'], preload: true, loop: true, mute: true }
}]
});
} else {
$("#header_video").vegas({
timer: false,
slides: [{
<?php if($image) { ?>
src: '<?php echo esc_attr($image[0]); ?>',
<?php }; ?>
video: { src: ['https://www.slashd.com/○○○.mp4'], preload: true, loop: true, mute: true }
}]
});
}
}
});
</script>
Math.random()によって発生する変数をJavaScriptで判定すると0の場合のみがfalseの判定となります。
Math.round( Math.random()*3 )は0、1、2、3をランダムに発生させるので、もっとも表示したくない動画をfalse判定としました。
この動画については直接URL指定してあります。
静止画はvideo:を削除するだけです。
この結果、静止画と動画がほぼ半分の確立で表示されるはずです。
また、お楽しみ動画が一つあるといったロジックです。
ところが、一番出にくいはずの動画がよく表示されます。
ランダムなので、正確な確率でコントロール出来ませんでした。
……
head.phpのカスタマイズについては以下のページも参照して下さい。
by T.Y.