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

前提・実現したいこと

当方現在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内の変数を用いることができないのでうまくいきません。

行動規範の内容に同意します

回答1件

自己解決

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