コミット
3ff2fa9695
73
youtube.html
73
youtube.html
|
|
@ -1,23 +1,56 @@
|
|||
<!--version : 1.1.１-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>YouTube動画を埋め込む</h1>
|
||||
<p>
|
||||
※：面倒なのでCSSを入れていません。
|
||||
</p>
|
||||
<p>
|
||||
<big><a href="/youtube.html">当該URL</a></big>
|
||||
</p>
|
||||
<p>
|
||||
これを使用すればYoutubeの動画を簡単に埋め込まれた状態で見ることができます。
|
||||
</p>
|
||||
<ul>
|
||||
<li>このプログラムはYoutubeの動画URLを挿入することで埋め込まれた動画を再生することができます。</li>
|
||||
<li>このプログラムに更新予定は有りません。</li>
|
||||
<li>不正なURLを入力した場合はYES/NO分岐をし、YESでは、about:blankに、NOでは、リロードし、再度質問されるようにしています。</li>
|
||||
</ul>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title id="mytitle">YouTubeの埋め込み</title>
|
||||
</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>
|
||||
読み込み中…
新しいイシューから参照