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

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

ただいまの
回答率

90.51%

  • jQuery

    8155questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • スライダー

    69questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

Slider Proで動画再生時は自動スライドを止める設定について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,515

hydethchang

score 2

Slider Proでyoutubeの複数の動画を自動スライドさせて、動画再生時はスライドをストップさせようとしています。
オプション設定はplayVideoActionを'stopAutoplay'にすればいいと思うのですが、動画再生時も自動スライドが止まりません。
設定に問題があるでしょうか。
よろしくお願いします。

http://www.geocities.jp/hydethchang/

 オプション

    <script>
        $( document ).ready(function( $ ) {
          $('#wide').sliderPro({
            width: 400,//高さ
            height: 230,//高さ
            arrows: true,//左右の矢印
            buttons: true,//ナビゲーションボタンを出す
            slideDistance:0,//スライド同士の距離
            visibleSize: '100%',//前後のスライドを表示
            autoplay: true,//自動再生
            autoplayDelay: 2000,//自動再生の間隔
            playVideoAction: 'stopAutoplay',//映像の再生開始時にスライダーのアクション
            touchSwipe: true,//ナビゲーションボタンを出す
            forceSize: 'fullWidth',//幅いっぱいに表示
          });
        });
    </script>

 ソースコード

    <div id="wide" class="slider-pro">
      <div class="sp-slides">
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/rRzxEiBLQCA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/gJX2iy6nhHc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/2WY1wrwpd3k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/3mKGLNBMINs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/wsl8HS_lVHE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      <!--/ sp-slides--></div>
    <!--/ wide--></div>

 ソースコード(変更後)

    <div id="wide" class="slider-pro">
      <div class="sp-slides">
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/rRzxEiBLQCA?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/gJX2iy6nhHc?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/2WY1wrwpd3k?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/3mKGLNBMINs?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="sp-slide">
          <iframe width="400" height="230" src="https://www.youtube.com/embed/wsl8HS_lVHE?enablejsapi=1&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
      <!--/ sp-slides--></div>
    <!--/ wide--></div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

マニュアルにはパラメータが必要と書かれていますね。

【slider-pro/modules.md at master · bqworks/slider-pro · GitHub】
https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#17-video

When using the second method, the videos will need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by &amp;.

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/01 11:18

    ご教授ありがとうございます。
    マニュアルと同じパラメータを付けてソースコードを更新しました。
    サンプルページも同様に更新して確認しましたが、動画再生時に自動スライドは止まりませんでした。

    キャンセル

  • 2018/02/01 11:40

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も後から見た人に「直したこと」がわかるようにしてください。

    再生時にコードの読み込みに失敗しているようなので、slider-proのバージョンが古いかYouTubeの仕様が変わったかどちらかではないでしょうか。

    キャンセル

  • 2018/02/01 12:36

    失礼いたしました。質問を修正しました。
    slider-proのバージョンも最新ですし、divを削除してiframe にclassを設定したり等しましたが状況が改善しませんでした。
    自動スライドを諦めるとかエンベットを止める等で対応しようかと思います。
    ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8155questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • スライダー

    69questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。