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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

4096閲覧

jquery 動画再生の方法が知りたい。

html5x

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/01/04 10:19

編集2017/01/04 12:41

facebookみたいに、スクロールの量に応じて、動画が中央に来たら自動再生を
行いたく、
http://qiita.com/narikei/items/bad7ab0ca62522d12ffe
を参考に考えたのですが、
複数の動画が縦に並んでいる場合、
スクロールに応じて動画を次から次に自動再生するには、以下のコードをどうすれば、
再生可能になるのか方法を教えてください。

javascript

1<div id="player"></div> 2 3<script> 4var player 5 6// YouTube IFrame APIのjsが読み込まれ終わったときの処理 7function onYouTubeIframeAPIReady() { 8 // プレイヤー作成 9 player = new YT.Player("player", { 10 height: 390, 11 width: 640, 12 videoId: "8-en4JdCGRo", 13 events: { 14 "onReady": function(event){ 15 // ミュート設定をする 16 event.target.mute() 17 } 18 } 19 }) 20} 21 22// スクロールイベント 23window.addEventListener("scroll", function() { 24 // 画面内にプレイヤーがあるかを判定 25 if (window.scrollY < player.getIframe().offsetTop && 26 window.scrollY + window.screen.height > player.getIframe().offsetTop + player.getIframe().offsetHeight) { 27 // 動画再生 28 player.playVideo() 29 } else { 30 // 動画停止 31 player.pauseVideo() 32 } 33}) 34</script> 35<script src="https://www.youtube.com/iframe_api"></script>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/04 12:34

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kei344

2017/01/04 16:29

「複数の動画」が表示されるようなコードが書いていないように見受けられます。どのように実装するのでしょうか。
guest

回答1

0

ベストアンサー

こういうのかな?
player = new YT.Playerの所を配列化して
ごにょごにょやればできるかもしれない

上のコードを参考に
YouTubeプレーヤーAPIでYouTubeを複数設置するほぼ丸コピ
IFrame Player APIリファレンス
フリー動画素材はこちら
を参考にしました
サンプル

html

1<!DOCTYPE html> 2<html> 3<head> 4<title></title> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script> 7<script src="https://www.youtube.com/iframe_api"></script> 8</head> 9<body> 10<div style="height:500px"></div> 11<div id="sample01"></div> 12<div id="sample02"></div> 13<div id="sample03"></div> 14<div id="sample04"></div> 15<div style="height:500px"></div> 16 <script type="text/javascript"> 17 //<!-- 18 var DONE = false; 19 // 各プレーヤーの格納 20 var ytPlayer = []; 21 // プレーヤーのサイズ 22 var ytWidth = 640; 23 var ytHeight = 390; 24 // 各動画情報 25 var ytData = [ 26 { 27 id: 'Np0bjoZGkGc', 28 area: 'sample01' 29 }, { 30 id: 'RMFM7YzzIec', 31 area: 'sample02' 32 }, { 33 id: 'BAEn_W_98Xo', 34 area: 'sample03' 35 }, { 36 id: 'JB9lXgdNroA', 37 area: 'sample04' 38 } 39 ]; 40 $(function(){ 41 var WH=Math.floor($(window).height()/2); 42 // スクロールイベント 43 $(window).scroll(function() { 44 if(DONE==false)return false; 45 // 画面内にプレイヤーがあるかを判定 46 for(var i=0;i<ytPlayer.length;i++){ 47 if ((ytPlayer[i].getIframe().offsetTop < ($(window).scrollTop()+WH)) && (($(window).scrollTop()+WH <ytPlayer[i].getIframe().offsetTop+ytHeight))){ 48 // 動画再生 49 if(parseInt(ytPlayer[i].getPlayerState())!==1){ 50 ytPlayer[i].mute().playVideo(); 51 } 52 }else{ 53 // 動画停止 54 if(parseInt(ytPlayer[i].getPlayerState())==1){ 55 ytPlayer[i].pauseVideo(); 56 } 57 } 58 } 59 }) 60}); 61//-------------------------------------------- 62// 各プレーヤーの埋め込み 63function onYouTubeIframeAPIReady() { 64 for(var i = 0; i < ytData.length; i++) { 65 ytPlayer[i] = new YT.Player(ytData[i]['area'], { 66 width: ytWidth, 67 height: ytHeight, 68 videoId: ytData[i]['id'], 69 playerVars: { 70 rel: 0 71 }, 72 events: { 73 'onReady': onPlayerReady 74 } 75 }); 76 } 77} 78//-------------------------------------------- 79// 各プレーヤー準備完了後の処理 80function onPlayerReady(e) { 81 for (var i = 0; i < ytData.length; i++) { 82 if(e.target.getIframe().id == ytData[i]['area']) { 83 if(i==ytPlayer.length-1)DONE=true; 84 } 85 }; 86} 87//-------------------------------------------- 88 //--> 89 </script> 90</body> 91</html>

投稿2017/01/04 21:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

html5x

2017/02/09 13:24

iPhone のsafariで再生すると、youtubeのインジケータが回ったままで、 再生が始まりません。再生する方法を教えてもらえないでしょうか。
html5x

2017/02/18 02:17

<video>タグを使って動画を埋め込んだ場合、動画が画面中央に来たら自動再生を 行うには、どうすればいいでしょうか。
turbgraphics200

2017/02/18 02:48 編集

iPhoneのSafari(そのほかのiPhoneのブラウザーも同じ)は自動再生は行えません。(muteに設定されていれば自動再生可能)
html5x

2017/02/18 02:53

iPhoneでの再生は諦めました。パソコンでのみ<video>タグで再生できらいいのですが...
退会済みユーザー

退会済みユーザー

2017/02/20 14:58

サンプルを改造するしか能が無いので別の質問にしてはどうでしょう?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問