連続自動再生の設定・設置

動画連続自動再生ツール

更新日: 2018年9月30日

ホームページ上に複数の動画があるとき、一つの動画を見終えると、画面が薄暗くなり、青いサークルが回り始めます。ユーザーが何もしないと、自動的に次の動画が始まります。

連続自動再生のサンプルを見る

フォルダとファイルの構成

連続自動再生は、以下のようなフォルダとファイル構成になっています。

autoplay フォルダ
  |-autoplay.js (動きを制御するプログラムファイル)
  |-autoplay.css (デザインファイル)
  |-setting (設定ファイル)
  |-・・・.mp4 (動画ファイル)
  |-・・・.mp4 
  |-

このうち、カスタマイズが必要なのは、動画ファイルと設定ファイルです。

動画ファイルの作り方

  • 動画の縦横のサイズはすべて同じにします。
  • アスペクト比が違う場合は、縦または横に黒い余白を入れて、アスベスト比を同じにします。
  • ファイル名は半角英数字にします。
  • 動画形式は mp4 にします。
  • 動画の本数には制限がありません。
  • できた動画は autoplay フォルダに移動します。

設定ファイルの作り方

弊社会員サイトで、連続自動再生の設定ファイルを生成して、ダウンロードします。設定項目は以下の通りです。

  • 動画のカテゴリー
  • 動画のタイトル
  • 動画のファイル名

この3つの組み合わせをいくつでも指定できます。
なお、設定項目を空欄にすると、うまく動きません。
設定ファイルができたら、autoplay フォルダに入れます。

連続自動再生の生成とダウンロード

連続自動再生を実装するページの設定

連続自動再生を実装するページが HTML の場合、ソースファイルを開きます。
Wordpressなら、連続自動再生を実装する投稿ページまたは固定ページを開き、テキストモードにします。

動画のサムネイル画像またはタイトルを ap_thumbクラス で囲み、ひとつひとつ再生させたい順に id="no1" とナンバリングしていきます。

<div class="ap_thumb" id="no1"><img src="autoplay/dougaA.mp4">
動画A</div>

連続自動再生の設置

以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置のしかたを説明します。

通常のhtmlファイルに設置する場合

  1. 作業をする前に、連続自動再生を実装する html のバックアップを取っておきます。
  2. autoplayフォルダを、連続自動再生を実装するページと同じ階層にアップロードします。
    |-
    |-html (動画ページ)
    |-autoplay フォルダ
        |-autoplay.js 
        |-autoplay.css 
        |-setting
        |-・・・.mp4 
    
  3. 連続自動再生を実装する html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

<link href="autoplay/autoplay.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="autoplay/autoplay.js" type="text/javascript"></script>
</head>
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

なお、スタンドアローンではテストできません。

wordpressに設置する場合

  1. 作業をする前に、必ず functions.php のバックアップを取っておきます。
  2. autoplayフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
    themes フォルダ
      |-
      |-current-theme (現在のテーマフォルダ)
          |-
          |-functions.php
          |-autoplay フォルダ
             |-autoplay.css
             |-autoplay.js
             |-setting
             |-・・・.mp4 
    
  3. 連続自動再生を実装するために、テーマフォルダ内の functions.php にcssファイルとjsファイルへのリンクとsearchフォルダへのパス(videoPath)を書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

例)

function cb_enqueue() {
  if (is_single ('xxx')) {
    echo '<script type="text/javascript">var videoPath 
="'.get_template_directory_uri()."/autoplay/".'";</script>';
    wp_enqueue_script ('ap_script', 
get_template_directory_uri()."/autoplay/autoplay.js", 
array('jquery'), false, true);
    wp_enqueue_style ('ap_style', 
get_template_directory_uri()."/autoplay/autoplay.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. テストして意図通りになっていればOKです。
  2. 意図通りになっていない場合は、設定ファイルを作り直し、上書きしてテストします。

CMSサイトへの設置は、サイト管理者に依頼するようにしましょう。

▲このページのトップへ