🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1332閲覧

IFrame Player API JavascriptコードにServiceのデータをバインドさせたい

jun9

総合スコア23

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2021/02/13 11:12

前提・実現したいこと

当方現在monacaでAngular jsを用いた英語並び替えのクイズアプリを作成しております。
現在このアプリにYoutube apiを用いて動画を埋め込み、動画内の英語を聞いて並び替えられるようにしようとしております。

並び替える単語はquestionService.jsからデータをHTML上にバインドし、表示させております。

今回並び替え問題に合わせ、動画の再生箇所を指定させるため、questionService.jsにstartTime,endTimeを追加し、app.directive( IFrame Player API JavaScript コード)内の時間指定個所にバインドさせたいのですが、どのようにすればバインドできるかが分かりません。

app.directive内にquestionService.js内のデータをバインドさせる方法がお分かりの方がいらっしゃいましたら教えていただきたいです。

イメージ説明

該当のソースコード

JavaScript

1var app = angular.module('myApp',['onsen']); 2 3 app.directive('youtube', function($window){ 4 5 6 var _link = function(scope, element, attr){ 7 8 var tag = document.createElement('script'); 9 tag.src = "https://www.youtube.com/iframe_api"; 10 var firstScriptTag = document.getElementsByTagName('script')[0]; 11 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 12 13 var player; 14 15 $window.onYouTubeIframeAPIReady = function() { 16 17 player = new YT.Player(element.children()[0], { 18 height: 210, 19 width: 375, 20 videoId: scope.youtubeId, 21 events: { 22 'onReady': onPlayerReady, 23 'onStateChange':onPlayerStateChange 24 } 25 }); 26 } 27 28 function onPlayerReady(event) { 29 event.target.seekTo(**me.items.currentQ.startTime**, true); 30 31 } 32 var timer; 33 function onPlayerStateChange(event) { 34 if (event.data == YT.PlayerState.PLAYING) { // 再生中の場合 35 timer = setInterval(repeatVideo, 1000); // 再生時間の監視開始 36 } else{ 37 clearInterval(timer);           // 再生時間の監視停止 38 timer = null; 39 } 40 } 41 42 function repeatVideo() { 43 if(player.getCurrentTime() >= **me.items.currentQ.endTime**){ // 〇〇秒超えたら 44 player.pauseVideo().seekTo(**me.items.currentQ.startTime**, true); // 〇〇秒後から開始 45 } 46 47 } 48 49 }; 50 51 return { 52 link: _link, 53 scope: { 54 width: "@", 55 height: "@", 56 youtubeId: "@" 57 }, 58 restrict: 'E', 59 template: '<div></div>', 60 61 }; 62 }); 63 64app.controller('gameCtrl',function(questionsService,$scope){ 65 var me = this; 66 me.items = {}; 67 me.answer = ""; 68 me.judges = []; 69 me.questionName = myNavigator.getCurrentPage().options.questionName; 70 71 var rightNum = 0; 72 73 74 var anserNum = null; 75 var questions = null; 76 77 var init = function(){ 78 me.items.currentNum = 0; 79 if(me.questionName==1){ 80 questions = JSON.parse(JSON.stringify(questionsService.questions1)); 81 me.items.totalNum = questions.length; 82 questionInit(); 83 }else{ 84 questions = JSON.parse(JSON.stringify(questionsService.questions2)); 85 me.items.totalNum = questions.length; 86 questionInit(); 87 88 } 89 } 90 91 92 var questionInit = function(){ 93 var currentQ = questions[me.items.currentNum]; 94 var qLength = currentQ.choices.length; 95 me.items.currentQ = currentQ; 96 me.answer = ""; 97 me.items.currentQ.answers = []; 98 me.items.currentQ.status = []; 99 for (var i = 0; i < qLength; i++) { 100 me.items.currentQ.status.push(false); 101 } 102 }; 103 104 me.showAnswer = function () { 105 var answer = ""; 106 for (var i = 0; i < me.items.currentQ.answers.length; i++) { 107 answer += me.items.currentQ.answers[i][1]; 108 } 109 me.answer = answer; 110 }; 111 112 113 114 me.choiceWord = function (index) { 115 me.items.currentQ.answers.push([index, me.items.currentQ.choices[index]]); 116 me.items.currentQ.status[index]=true; 117 me.showAnswer(); 118 }; 119 120 me.getAnswer = function(){ 121 var flag = document.getElementById('hoge').value ==me.items.currentQ.answer; 122 var flagText = "間違い"; 123 if(flag){ 124 me.judges.push(['〇',me.items.currentQ.text,me.items.currentQ.answer]); 125 flagText = "正解"; 126 }else{ 127 me.judges.push(['×',me.items.currentQ.text,me.items.currentQ.answer]); 128 } 129 ons.notification.alert({ 130 message: '正解 :『' + me.items.currentQ.answer + '』', 131 title: flagText, 132 buttonLabel: 'NEXT', 133 animation: 'default', 134 callback: function() { 135 136 if(me.items.currentNum >= me.items.totalNum-1){ 137 myNavigator.pushPage('result.html',{judges:me.judges}); 138 }else{ 139 me.items.currentNum++; 140 $scope.$apply(questionInit); 141 } 142 } 143 }); 144 }; 145 146 147 me.backTop = function(){ 148 myNavigator.pushPage('top.html', { animation: "none" }); 149 }; 150 init(); 151});

JavaScript

1// service 2app.value('questionsService', { 3 questions1 : [ 4 { 5 "text": "あなたは毎日英語を勉強しなければなりません。", 6 "answer": "You must study English every day ", 7 "choices": ["You ","English ","must ","every ","study ","day "], 8 **"startTime":10,** 9 ** "endTime":20,** 10 }, 11 ] 12});

試したこと

IFrame Player API JavaScript コード内の時間指定部分にme.items.currentQ.startTime(開始)、me.items.currentQ.startTime(終了)を入力しましたが、app.directive内にgameCtrl内の変数を用いることができないのでうまくいきません。

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

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

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

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

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

guest

回答1

0

自己解決

JavascriptのgameCtrl内で
window.startTime=me.items.currentQ.startTime;
window.endTime=me.items.currentQ.endTime;
を追加し、IFrame Player API JavaScript コード内の時間指定部分に
startTime/endTimeを入れることで解決しました。

投稿2021/02/21 03:56

jun9

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問