document.addEventListener("DOMContentLoaded", function () {
	// メディアファイルのデータ（順番と表示時間）
    let mediaFiles = [
		      { type: 'video', file: 'A.mp4', duration: 10 },
		      { type: 'pdf', file: 'B.pdf', duration: 20 },
		      { type: 'video', file: 'C.mp4', duration: 30 },
		      ];

    let currentIndex = 0;

    function showNextMedia() {
        if (mediaFiles.length === 0) return; // メディアがなくなったら何もしない

        const media = mediaFiles[currentIndex];
        const mediaContainer = document.getElementById('media-container');
        mediaContainer.innerHTML = ''; // 現在のメディアをクリア

        const mediaWrapper = document.createElement('div');
        mediaWrapper.classList.add('media-wrapper');

        // 削除ボタンを作成
        const deleteButton = document.createElement('button');
        deleteButton.innerText = '削除';
        deleteButton.classList.add('delete-btn');
        deleteButton.onclick = () => deleteMedia(mediaWrapper, media);
        mediaWrapper.appendChild(deleteButton);

        if (media.type === 'video') {
            const videoElement = document.createElement('video');
            videoElement.src = `mediafiles/${media.file}`;
            videoElement.controls = true;
            videoElement.autoplay = true;
            mediaWrapper.appendChild(videoElement);

            videoElement.onended = () => {
                setTimeout(() => {
			currentIndex++;
			if (currentIndex >= mediaFiles.length) {
			    currentIndex = 0; // 最後まで表示したら最初に戻す
			}
			showNextMedia();
		    }, 500); // 動画終了後に500ms待機
            };
        } else if (media.type === 'pdf') {
            const pdfContainer = document.createElement('div');
            pdfContainer.classList.add('pdf-container');
            mediaWrapper.appendChild(pdfContainer);

            const loadingTask = pdfjsLib.getDocument(`mediafiles/${media.file}`);
            loadingTask.promise.then(pdf => {
		    pdf.getPage(1).then(page => {
			    const canvas = document.createElement('canvas');
			    pdfContainer.appendChild(canvas);
			    const context = canvas.getContext('2d');
			    const viewport = page.getViewport({ scale: 1.5 });
			    canvas.height = viewport.height;
			    canvas.width = viewport.width;
			    page.render({ canvasContext: context, viewport: viewport });

			    setTimeout(() => {
				    currentIndex++;
				    if (currentIndex >= mediaFiles.length) {
					currentIndex = 0; // 最後まで表示したら最初に戻す
				    }
				    showNextMedia();
				}, media.duration * 1000); // PDF表示時間
			});
		});
        }

        mediaContainer.appendChild(mediaWrapper);
    }

    // メディアファイルを削除する関数
    function deleteMedia(mediaWrapper, media) {
        // メディアを削除した場合、配列から削除
        mediaFiles = mediaFiles.filter(item => item !== media);
        mediaWrapper.remove(); // 表示されているメディアを削除

        // 削除後、次のメディアを表示
        currentIndex = currentIndex >= mediaFiles.length ? 0 : currentIndex;
        showNextMedia();
    }

    // 初回メディアの表示
    showNextMedia();
    });
変更点の詳細：
    繰り返し再生機能:

currentIndexがmediaFiles.length（メディアの総数）を超えたときに、currentIndexを0に戻して最初のメディアから再表示します。

これにより、すべてのメディアが表示された後、繰り返し表示されるようになります。

    削除機能:

各メディアには「削除」ボタンを追加し、これをクリックするとそのメディアがmediaFiles配列から削除されます。

配列から削除後、メディアのインデックスが削除されたメディアをスキップするように調整されます。

削除された後、次のメディアが表示され、もし削除後にメディアがなくなった場合、配列が空になるため何も表示されなくなります。

もし削除後に配列が空になった場合（全てのメディアが削除された場合）は、初期化して再表示されるように調整できます。

    追加したCSS (style.css)
削除ボタンのスタイルを追加しました。

css
コピーする
編集する
    .delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: darkred;
 }

.media-wrapper {
    position: relative;
    margin-bottom: 20px;
 }