Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts

    html5 vid. pause, reload sources, load, play

    Hi i have been struggling with html5 videos for 3 days now. I can get the video working if it was static html on the page. Problem is the video is hidden and empty when the page the loads. Some user interaction fires an event that shows the video as a pop on. What i need to be able to do is stop / pause the video. reload sources and start the video

    Code:
    m4vvid = document.getElementById('m4vvid');
    				webmvid = document.getElementById('webmvid');
    				oggvid = document.getElementById('oggvid');
    				mp4vid = document.getElementById('mp4vid');
    				flashvarsparam = document.getElementById('flashvarsparam');
    				flashvarsembed = document.getElementById('flashvarsembed');
    				player = document.getElementById('main_vid_full');
    				
    				player.pause();
    				player.src=m4v;
    				
    				
    				$(m4vvid).attr("src", m4v);
    				$(oggvid).attr("src", ogg);
    				$(webmvid).attr("src", webm);
    				$(mp4vid).attr("src", mp4);
    				$(flashvarsparam).attr("value", "autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster="+vidposter+"&src="+m4v);
    				$(flashvarsembed).attr("flashVars", "autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster="+vidposter+"&src="+m4v);
    				
    				
    				player.load();
    				
    				
    				player.play();
    This code works on IE and firefox however when i came to test on the android phone it doesnt work. If i construct all the html and user innerHTML to replace the contents of the video tags then android works. However this method breaks on other browsers.
    How can i do this for android.

    I figured out i can do

    Code:
    player.src=m4v;
    Which seems to play something on the android. However i do nt want it to break the other browsers and i wouldnt know which source i should be loading into .src. Do i need some browser detection. Im a bit stuck here
    Last edited by timgolding; 04-08-2014 at 05:08 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Thanks for all the help!!!

    I found a solution.

    Fisrt i had to drop the idea of changing the source tags attributes with jquery and go to changing the player.src
    I used Modernizr: the feature detection library for HTML5/CSS3 for two reason

    1) Does this browser player HTML5 video
    2) Which file does it support

    Code:
                                  // Does this browser support html5 vids
                                  if (Modernizr.video) {
    					
    					
    					player = document.getElementById(\'main_vid_full\');
    					vidposter = video_src[img_index][4];
    					m4v = video_src[img_index][3];
    					mp4 = video_src[img_index][0]
    					webm = video_src[img_index][2];
    					ogg = video_src[img_index][1];
    					player.pause();
    					$("#main_vid_full").attr("poster", vidposter);
    				  if (Modernizr.video.h264) {
    					// try AVC
    					player.src = m4v;
    						
    						
    				  } else if (Modernizr.video.webm) {
    					// try WebM
    					player.src = webm;
    						
    				  } else if (Modernizr.video.ogg) {
    					  // try Ogg Theora + Vorbis in an Ogg container
    					  player.src = ogg;
    				  }
    				  else
    				  {
    					  // try low res mp4
    					  player.src = mp4;
    					  
    				  }
    				  player.load();
    				  player.play();
    				  
    				}
    				else
    				{
    					// dont even bother trying with pop on fall back to stactic video with flash fallback
    					window.location.href = "/url/to/static/video/inc/flash";
    				}
    Then if js is turned off or the broswer doesn't support this tag then it falls back to the static html based video
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •