|
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta name="GENERATOR" content="Hand make on vi (jvim)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="/style.css">
<title>動画集__連続再生サンプル</title>
<style type="text/css">
hr {text-align:left; border-width:2px 0px 0px 0px; border-color:#ff0000; width:100%; height:10px; }
</style>
<script type="text/javascript">
function init_s() {
// リスト数分追加
for (var i = 0; i < slst.length; i++) {
var div = document.createElement("div");
div.textContent = nlst[i] ;
document.getElementById("playlist").appendChild(div);
}
// 表示幅調整
document.getElementById("playlist").style.width = "100%";
next(idx);
}
function next(idx) {
// リスト数分削除
const target = document.getElementById('playlist');
while (target.firstChild) {
target.removeChild(target.firstChild);
}
// リスト数分追加
for (var i = 0; i < slst.length; i++) {
var j = i + idx ;
if ( j >= slst.length ) {
j = j - slst.length ;
}
var div = document.createElement("div");
div.textContent = nlst[j] ;
document.getElementById("playlist").appendChild(div);
}
// videoタグ取得
var video = document.getElementById("video");
// videoタグを書き換える
video.innerHTML = "<video id=\"videos\" poster=\"" + slst[idx] +
".jpg\" width=\"720\" height=\"405\" controls autoplay >\n<source src=\"" +
slst[idx] + ".mp4\">\n</video>\n";
// videosタグ取得
videos = document.getElementById("videos");
// 終了イベント取得設定
videos.addEventListener("ended", playerEvent, false);
// 再生中の動画名称を表示する
document.getElementById("playfilename").textContent = nlst[idx] ;
}
// イベント取得
function playerEvent(event) {
// イベントタイプ判定
if (event.type == "ended") {
// 終了なので、次へ
idx++ ;
if ( idx < slst.length ) {
next(idx);
}
// エンドレスに再生すときは、下記のコードを追加する
// else {
// idx = 0 ;
// next(idx);
// }
}
}
// 表示
// 再生開始番号を登録
var idx = 0 ;
// 動画ファイル名（URL）配列
var slst = new Array (
"21_KITAGUNI_NO_HARU" ,
"22_YUME_NO_HANA_KOI_NO_HANA" ,
"23_TATEYAMA_RENPOH" ,
"24_ONNA_NO_AME" ,
"25_ONNA_AME" ,
"26_KARISONE_NO_HANA" ,
"27_SOHRAN_WATARIDORI" ,
"28_HITORI_NAKI" ,
"29_YOSHI_MIZUMORI_SP" ,
"30_ONNA_GOKORO_MEDLEY"
);
// 動画名称（表示）配列
var nlst = new Array (
"21_北国の春" ,
"22_夢の花・恋の花" ,
"23_立山連峰" ,
"24_おんなの雨" ,
"25_おんな雨" ,
"26_かりそめの花" ,
"27_ソーラン渡り鳥" ,
"28_ひとり泣き" ,
"29_吉幾三＆水森かおり スペシャルショー／2004" ,
"30_水森かおり「女ごころ』メドレー（５曲）"
);
// ページを開いたときに再生開始する。
window.addEventListener("load", init_s, false);
</script>
</head>
<body>
<div style="position: fixed; top: 0px; left: 0px; width: 750px; height: 100%; overflow: auto;">
<table>
<tbody>
<!-- 動画名称 -->
<tr>
<td colspan="3" style="width: 750px; height: 20px;"><div id="playfilename"></div></td>
</tr>
<!-- プレイヤー部分 -->
<tr>
<td id="video" colspan="3" style="width: 750px; height: 405px;">
</td>
</tr>
<!-- 一覧部分 -->
<tr>
<td style="white-space: nowrap;" colspan="3">
<div id="playlist" style="width: 750px; height: 200px; overflow: auto;"></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
