locked
App bar buttons not working

    Question

  • I am trying to make custom control buttons for the video tag.  I am using the grid template to load my data into the pages and it loads the video source perfectly.  Before I got this working I created a video page with all my custom controls added into the App Bar and tested it out and it worked great.  Now coming back to this page I can get the app bar to appear and see all my buttons but none of the fly-out or buttons work?  I have pasted my code below.  Any ideas?

            ready: function (element, options) {
                var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
                element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
                element.querySelector("article .item-title").textContent = item.title;
                element.querySelector("article .item-subtitle").textContent = item.subtitle;
                element.querySelector("article .item-content").innerHTML = item.content;
                element.querySelector("article .item-video").src = item.video;
                element.querySelector(".content").focus();
    			document.getElementById("cmdPlay").addEventListener("click", doClickPlay, false);
    			document.getElementById("cmdVolume").addEventListener("click", doClickVolume, false);
    			document.getElementById("volumebar").addEventListener("change", doVolumeBar, false);
    			document.getElementById("cmdPrevious").addEventListener("click", doClickPrevious, false);
    			document.getElementById("cmdNext").addEventListener("click", doClickNext, false);
    			document.getElementById("video").addEventListener("timeupdate", doTime, false);
    			document.getElementById("seekbar").addEventListener("change", doSeekBar, false);
    			document.getElementById("seekbar").addEventListener("MSPointerDown", doMouseDown, false);
    			document.getElementById("seekbar").addEventListener("MSPointerUp", doMouseUp, false);
    			document.getElementById("video").addEventListener("loaded", doProgressBar, false);
    			document.getElementById("cmdDownload").addEventListener("click", doClickDownload, false);
    
    			function doClickDownload() {				
    				window.location.href = item.video;
    
    			}
    
    			function doProgressBar() {
    			    var loadingIndicator = document.getElementById("progressdiv");
    			    if (loadingIndicator) {
    			        loadingIndicator.className = "win-paused";
    			    }
    			}
    
    			function playVideo(src) {
    				document.video.source[src].play();
    			}
    			
    			function doMouseDown() {
    				video.pause();
    			}
    
    			function doMouseUp() {
    				video.play();
    			}
    
    			function doSeekBar() {
    				// Calculate the new time
    				var time = video.duration * (seekbar.value / 100);
    
    				// Update the video time
    				video.currentTime = time;
    
    			}
    
    			function doTime() {
    				// Calculate the slider value
    				var value = (100 / video.duration) * video.currentTime;
    
    				// Update the slider value
    				seekbar.value = value;
    			}
    
    			                function setTime(tValue) {
                        //  if no video is loaded, this throws an exception 
                        try {
                            if (tValue == 0) {
                                video.currentTime = tValue;
                            }
                            else {
                                video.currentTime += tValue;
                            }
    
                        } catch (err) {
                            // errMessage(err) // show exception
                            errMessage("Video content might not be loaded");
                        }
                    }
    
    
    			function doClickPrevious() {
    				setTime(-10);
    			}
    
    			function doClickNext() {			    
    			    setTime(10);
    			}
    
    			function doVolumeBar() {
    				// Update the video volume
    				video.volume = volumebar.value;
    				
    			}
    
    			function doClickVolume() {
    			    var cmd = document.getElementById('cmdVolume');
    			    if (video.muted == false) {
    			        // Mute         
    			        cmd.winControl.icon = 'mute';
    			        cmd.winControl.label = 'Mute';
    			        video.muted = true
    			    } else {
    			        // Volume         
    			        cmd.winControl.icon = 'volume';
    			        cmd.winControl.label = 'Volume';
    			        video.muted = false
    			    }
    			}
    
    			video.onended = function (e) {
    			    var cmd = document.getElementById('cmdPlay');
    			    cmdPlay.value = cmd.winControl.icon = 'play';
    			    cmdPlay.value = cmd.winControl.label = 'Play';
    			}
    
    			var isPaused = true;  
    			function doClickPlay() {  			    
    				var cmd = document.getElementById('cmdPlay');  
    				if (video.ended || !isPaused) {
    				isPaused = true; // paused         
    				cmd.winControl.icon = 'play';         
    				cmd.winControl.label = 'Play'; 				        
    				video.pause();
    			} else {         
    				isPaused = false; // playing         
    				cmd.winControl.icon = 'pause';         
    				cmd.winControl.label = 'Pause';
    				video.play();
    				} 
    			}
    		}
    

    Saturday, June 22, 2013 4:37 PM

Answers

  • Found the solution.  It was in my placement of the Div in the html code.   I had placed it in the article element and moved it out to a different section of the code. 
    Monday, June 24, 2013 7:47 PM

All replies

  • Found the solution.  It was in my placement of the Div in the html code.   I had placed it in the article element and moved it out to a different section of the code. 
    Monday, June 24, 2013 7:47 PM
  • Dear finding bemo,

    we are happy that you have solved your issue,thank you to share with us.

    Regards

    Wednesday, June 26, 2013 7:02 AM
    Moderator