More than 3 years have passed since last update.

HTMLで複数動画を連続再生する方法

Posted at 2021-10-20

html単独動画の自動再生
 html複数動画の自動再生
 css複数動画を同時に表示しない
 jquery設定
 参考記事

目標：WordPress内で複数動画を順次再生させる

html単独動画の自動再生

表示させたいウェブページにHTML記述

<video id="video1" width="640" height="360" autoplay>
    <source src="＜動画URL＞.mp4">
</video>

autoplay：自動再生

html複数動画の自動再生

<video id="video1" width="640" height="360" autoplay>
    <source src="＜動画1URL＞.mp4">
</video>
<video id="video2" width="640" height="360">
    <source src="＜動画2URL＞.mp4">
</video>
<video id="video3" width="640" height="360">
    <source src="＜動画3URL＞.mp4">
</video>

css複数動画を同時に表示しない

子テーマ内style.cssで設定

#nbsp;vim/var/www/html/example.com/wp-content/themes/子テーマ/style.css

# video2, #video3 {
    display: none;
}

jquery設定

JQuery読み込み

内に記述

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

子テーマ内にディレクトリ`js`作成

その中にvideo.js作成
JQueryで最初の動画の終了をendedイベントで処理

#nbsp;vim/var/www/html/example.com/wp-content/themes/子テーマ/js/video.js

jQuery(function () {
    for (var i = 1; i <= 3; i++)
    {
        // 1
        (function() {
            // 2
            var nextIndex = (i != 3) ? (i + 1) : (1);
            var $nextVideo = $("#video" + nextIndex);
             
            // 3
            $("#video" + i).on("ended", function() {
                $(this).hide();
                $nextVideo.show();
                 
                $nextVideo.get(0).play();
            });
        })(i);
    }
});

WordPress内でJQuery設定をするときは、通常なら
$(function () {
とするところを、
jQuery(function () {
と記述

functions.php設定

#nbsp;vim/var/www/html/example.com/wp-content/themes/子テーマ/functions.php

if (!is_admin()) {
   function register_script(){
        wp_register_script( 'video', get_stylesheet_directory_uri() . '/js/video.js', array( 'jquery' ), '', false);
        }
    function add_script() {
        register_script();
        wp_enqueue_script('video');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

参考記事

http://chicketen.blog.jp/archives/6539298.html
https://hsmt-web.com/blog/js-jquery-wp/
https://affiliate150.com/function-javascript

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up