質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

JavaScript iframeの停止

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,042

may88seiji

score 69

前提・実現したいこと

前提:画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。 

実現したいこと:
動画を再生中に他の画像をクリックすると、iframeで埋め込まれた動画を停止して画像にもどすこと。

試したこと

iframeをdisplay:noneにしてJavaScriptによって非表示にすることはできましたが、画像の後ろで動画が再生されたままになってしまいます。

皆様にはクリックにて画像⇄動画を切り替えると同時に再生中の動画を停止する方法をお教えいただけたらと存じます。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>動画の停止</title>
    <style>
        .item {
            width: 25%;
            float: left;
            padding-bottom: 5%;
        }

        .item-box {
            height: 200px;
            width: 200px;
            margin: auto;
            background-color: #11D8B3;
            border-radius: 5px;
        }

        #movie1,
        #movie2{
            display: none;
        }

        .articles > div {
            display: none;
            font-size: 40px;
            margin: auto;
            float: left;
        }
    </style>
</head>

<body>
   <!--画像と動画-->
<div class="item">
    <div class="item-box">
        <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
        <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe>
    </div>
</div>

<div class="item">
    <div class="item-box">
        <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div>
        <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe>
    </div>
</div>

<div class="articles">
    <!--ここから詳細文-->
    <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed".
    </div>
    <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。
    </div>
</div>


    <script type="text/javascript">
        //詳細の表示
        function show(num) {
  return function(){
    document.getElementsByClassName
    document.getElementById("article" + num).style.display = "block";
    return false;
  };
}
        //詳細詳細の非表示
function hide(num) {
  return function(){
    document.getElementById("article" + num).style.display = "none";
    return false;
  };
}
//画像と動画の切替 
function change(num) {
return function(){
var itemboxes = document.getElementsByClassName('item-box');
for(var i = 0; i < itemboxes.length; i++){
itemboxes[i].getElementsByTagName('div')[0].style.display = "block";
}
    var x = document.getElementsByTagName("iframe");
for(var i = 0; i < x.length; ++i){
x[i].style.display = "none";
} 
document.getElementById("img" + num).style.display = "none";
document.getElementById("movie" + num).style.display = "block";
return false;
};
};
//イベントハンドラをまとめる関数
window.onload=function(){
  var itemboxes = document.getElementsByClassName('item-box');
  for(var i = 0; i < itemboxes.length; i++){
    var num = i + 1;
    var node;
    // div
    node = itemboxes[i].getElementsByTagName('div')[0];
    node.onclick=change(num);
    // img
    node = itemboxes[i].getElementsByTagName('img')[0];
    node.onmouseover=show(num);
    node.onmouseout=hide(num);
    // iframe
    node = itemboxes[i].getElementsByTagName('iframe')[0];
    node.onmouseover=show(num);
    node.onmouseout=hide(num);
  }
};
    </script>
</body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

<iframe>をDOMツリーから削除すると、iframe内のオブジェクトもすべて削除される(ブラウザのウィンドウをcloseするのと同じ)ので動画も停止するのではないでしょうか。

目的の <iframe> を削除してから作り直す、という処理でうまく動くと思います。

<iframe>の削除と再作成

// iframe を削除
var e = document.getElementById('movie1');
var parent = e.parentElement;
parent.removeChild(e);
// iframe を再作成
e = document.createElement('iframe');
e.id = "movie1";
e.width = "200px";
e.height = "200px";
e.src = "https://www.youtube.com/embed/j5PLngd2WN0";
parent.appendChild(e);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 14:06

    コメント有難うございます。
    <iframe> を削除してから作り直す(画像⇔動画の切替との連携)は具体的にどのようなコードになりますでしょうか?

    試しに下記コードを記述しましたがうまくいっておりません。
    お教えいただければ幸いです。
    var x = document.getElementsByTagName("iframe");
    for(var i = 0; i < x.length; ++i){
    x[i].style.display = "none";
    document.body.removeChild(x);
    document.body.createElement('iframe')
    }

    キャンセル

  • 2016/05/25 21:19

    <iframe>の削除と再作成のサンプルコードを追記しました。
    これをベースにして、もう少し汎用的に(目的のiframeのidを動的に変化させられるように)修正すればよいと思います。

    キャンセル

  • 2016/05/25 23:45

    ありがとうございます。無事に動画を止めて切り替えることができました。
    関数の汎用化、難しそうですがとりあえずトライしてみます!

    キャンセル

+1

src プロパティに null を代入すれば iframe 要素のリンク先を削除することが可能と思われます。

document.getElementById('movie1').src = null;

「YouTube JavaScript Player API」を使えば、さらに融通の利いた機能を実装できそうです。

Re: may88seiji さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/24 22:31

    回答ありがとうございます。nullを設定した場合、停止ではなく「指定したファイルまたはディレクトリは見つかりませんでした」という結果になるようです。。。
    一度、YouTube JavaScript Player APIについて調べてみます。

    キャンセル

  • 2016/05/24 22:57 編集

    クロスドメインなURIをiframe要素で埋め込んでいる為、動画再生自体を直接止めることはできません。
    間接的に止める方法として null 代入を提案しました。
    正規の手順で動画再生を停止するには YouTube JavaScript Player API しかないと思います。

    キャンセル

  • 2016/05/24 23:03

    ありがとうございます。画像で切り替わった時点でnullを代入し、再度動画に切り替えた時にsrcを代入しなおすことができれば、nullでも停止はできそうですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる