57 行
2.2 KiB
HTML
57 行
2.2 KiB
HTML
<!--version : 1.1.2-->
|
|
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title id="mytitle">ホーム</title>
|
|
<link type="image/png" href="//ssl.gstatic.com/classroom/favicon.png" rel="icon">
|
|
</head>
|
|
<body>
|
|
<iframe id="myframe"frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<script>
|
|
var link = prompt("YouTubeのリンクを入力してください。\n ちなみに、著作権で保護された動画は再生できないっぽいです。");
|
|
var frame = document.getElementById("myframe");
|
|
var title = document.getElementById("mytitle");
|
|
// youtube.com/shorts/**のURLにも対応するように、正規表現のパターンを変更
|
|
var youtubePattern = /^(https:\/\/youtu\.be\/|https:\/\/(www\.)?youtube\.com\/(watch\?v=|shorts\/))([\wA-Z-]+)$/;
|
|
// link変数に対してmatchメソッドを使って、正規表現とマッチした結果を取得
|
|
var match = link.match(youtubePattern);
|
|
if (match) {
|
|
// 入力がYouTubeのリンクの形式に合っている場合
|
|
// 埋め込み用のURLに変換
|
|
// match[4]は、動画IDとなる文字列
|
|
var embed = "https://www.youtube.com/embed/" + match[4] + "?rel=1&autoplay=1";
|
|
// フレームのsrc属性に設定
|
|
frame.src = embed;
|
|
// 動画のタイトルを取得するために、Web検索を行う
|
|
var query = "YouTube " + match[4];
|
|
var results = search_web(query);
|
|
// Web検索の結果から、最初に見つかった動画のタイトルを取得
|
|
var videoTitle = results.web_search_results[0].title;
|
|
// <title>タグの中に動画のタイトルを入れる
|
|
title.textContent = videoTitle;
|
|
} else {
|
|
// 入力がYouTubeのリンクの形式に合っていない場合
|
|
// confirm関数で、はいといいえのダイアログを表示する
|
|
var result = confirm("不正なURLです。\n OKを押すとabout:blankへ遷移されます。\n キャンセルを押すと再度入力可能になります。");
|
|
if (result) {
|
|
// OKを押した場合
|
|
window.location = "about:blank";
|
|
} else {
|
|
// キャンセルを押した場合
|
|
// ページをリロードして最初に戻る
|
|
window.location.reload();
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |