Results 1 to 5 of 5

Thread: Html5 Video not working After ajax page loaded.

  1. #1
    Join Date
    Apr 2014
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Html5 Video not working After ajax page loaded.

    Dear Sir Please help me. I have spent enough time almost two weeks to get this sorted but no reply.

    I am trying to Make a HTML5 Video play when a link is clicked though a external Ajax page. its said allover that ajax has a different way of calling. I used the dynamic drive site code thus:

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</title>
    
    
    	<link rel="stylesheet" href="style.css">
    	<script src="script.js"></script>
            
      
    <script type="text/javascript">
    
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    page_request.open('GET', url, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    	
    //	alert("LOAD OBJECT");
    	
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    
    
    <style type="text/css">
    #contentright{
    float:left;
    width:150px;
    height: 400px;
    border: 3px solid black;
    padding: 5px;
    padding-left: 8px;
    
    }
    
    #contentright a{
    padding: 3px 1px;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;
    }
    
    #contentright a:hover{
    background-color: #FFFF80;
    }
    
    #movm_cal_right_box{
    background-color:#099;
    width:550px;
    float:left;
    left:145px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 10px;
    padding: 5px;
    padding-bottom: 8px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="contentright">
        <a href="javascript:ajaxpage('external1.htm', 'movm_cal_right_box');">Porsche Page</a>
        <a href="javascript:ajaxpage('external2.htm', 'movm_cal_right_box');">Ferrari Page</a>
        <a href="javascript:ajaxpage('external3.htm', 'movm_cal_right_box');">Aston Martin Page</a>
    </div>
    
    <div id="movm_cal_right_box">
    
    
                        Some text here
    
    
    </div>
    
    
    
    </body>
    
    </html>

    <a href="javascript:ajaxpage('external1.htm', 'movm_cal_right_box');">Porsche Page</a> When I click this, in the external1.htm I Am doing a simple html5 player call.


    Code:
    	<link rel="stylesheet" href="style.css">
    	<script src="script.js"></script>
    
    
    <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
    
                        <div id="video-container">
                        
                                <!-- Video -->
                                <video id="video" width="640" height="365">
                                      <source src="echo-hereweare.mp4" type="video/mp4">
                    
                                      <p>
                                        Your browser doesn't support HTML5 video.
                                        <a href="videos/echo-hereweare.mp4">Download</a> the video instead.
                                      </p>
                                      
                                </video>
                                <!-- Video Controls -->
                                
                                <div id="video-controls">
                                        <button type="button" id="play-pause" class="play">Play</button>
                                        <input type="range" id="seek-bar" value="0">
                                        <button type="button" id="mute">Mute</button>
                                        <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
                                        <button type="button" id="full-screen">Full-Screen</button>
                                </div>
                            
                        </div>
    But when the ajax loads this external1.htm as usual the html5 player dosnet work.

    How can I get this work through ajax to play a HTML5 mp4 Video.

    Thanking you

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    In this case, it's much safer not to use ajax but an iframe instead. Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ajax Rotating Includes Script</title>
    
    <style type="text/css">
    #contentright{
    float:left;
    width:150px;
    height: 400px;
    border: 3px solid black;
    padding: 5px;
    padding-left: 8px;
    
    }
    
    #contentright a{
    padding: 3px 1px;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;
    }
    
    #contentright a:hover{
    background-color: #FFFF80;
    }
    
    #movm_cal_right_box{
    background-color:#099;
    width:550px;
    float:left;
    left:145px;
    min-height: 400px;
    border: 3px solid black;
    margin-left: 10px;
    padding: 5px;
    padding-bottom: 8px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="contentright">
    
    <a href="javascript:void(0)" onclick="frames.movm_cal_right_box.location.replace('external1.htm'); return false">Porsche Page</a>
    <a href="javascript:void(0)" onclick="frames.movm_cal_right_box.location.replace('external2.htm'); return false">Ferrari Page</a>
    <a href="javascript:void(0)" onclick="frames.movm_cal_right_box.location.replace('external3.htm'); return false">Aston Martin Page</a>
     
    </div>
    
    <iframe id="movm_cal_right_box" name="movm_cal_right_box">
    </iframe>
    
    
    
    </body>
    
    </html>

  3. #3
    Join Date
    Apr 2014
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Arie

    Thank you so much for the effort to help. Appreciate. But when add to Iframe the HTML5 DOsent zoom or goes full screen. SO I thought to add an ajax. I saw many posts where they say to get to a document. ready. I am confused. Something like below. This works but the controls are all gone. Its tuff.


    <!DOCTYPE html>
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Demo Page</title>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="jquery.min.js"></script>

    </head>

    <body>

    <video id='video' width="640" height="480" controls="controls">
    <source id='mp4Source' src="" type="video/mp4" />
    </video>

    <script>
    $(document).ready(function () {
    // theVid will be populated by query string, for testing it's hard coded.
    //var theVid = 'http://html5demos.com/assets/dizzy.mp4';
    var theVid = 'echo-hereweare.mp4';

    var player = document.getElementById('video');
    var mp4Vid = document.getElementById('mp4Source');

    player.pause();

    // Now simply set the 'src' attribute of the mp4Vid variable!!!!
    // (...using the jQuery library in this case)

    $('#mp4Source').attr('src', theVid);
    player.load();
    //player.show();
    player.play();

    });
    </script>






    </body>

    </html>



    SO I prefer to load in ajax. Any help appreciated.

    Thanking you.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Then you could try links like:
    <a href="javascript:void(0)" onclick="$('#movm_cal_right_box').load('external1.htm'); returrn false">External 1</a>

    In the head:
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    Last edited by molendijk; 07-26-2014 at 05:13 PM. Reason: Correction in code

  5. #5
    Join Date
    Apr 2014
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Molendijk, I really appreciate the thought of help. this was almost there but in the android this was getting stuck. Thank you for the help and this code of yours is helpful.

    However I wrote a small code: thus:

    Code:
            <script type="text/javascript">
    
    				$(document).ready(function(){
    
    							$("#page1").click(function(){
    							$('#result').load('external1.htm');
    						   }); 
    				 
    						   $("#page2").click(function(){
    							$('#result').load('external2.htm');
    						   });
    						   
    						   $("#page3").click(function(){
    							$('#result').load('external3.htm');
    						   });		
    						   
    						   $("#page4").click(function(){
    							$('#result').load('external4.htm');
    						   });
    				   
                     });
            </script>    	
            
            
            
        </head>
    
        <body>
        
    
    </div>	
    
    This is the area <br /><br />
    
    
    <ul>
    	<li><a id="page1" href="#">Media Element 1 HTML5 video</a></li>
    	<li><a id="page2" href="#">Media Element 2 HTML5 video</a></li>
    	<li><a id="page3" href="#">Media Element 3 flash</a></li>
    	<li><a id="page4" href="#">Media Element 4 flash</a></li>    
    </ul>
    And used the Media element player with many lovely features, it loaded in the Ajax. Thank you so much fro the help. This is a lovely forum that provides assistance. Good luck Dynamic Drive Forums and Good day Molendijk.

    Cheers.

Similar Threads

  1. Javascript in ajax loaded page
    By legend.raju in forum JavaScript
    Replies: 2
    Last Post: 07-21-2010, 07:08 PM
  2. JavaScript not working on AJAX loaded page
    By plw in forum JavaScript
    Replies: 10
    Last Post: 07-02-2010, 10:31 AM
  3. JS not working in Ajax loaded page
    By dracula51 in forum JavaScript
    Replies: 2
    Last Post: 10-29-2009, 06:58 AM
  4. Query AJAX Loaded Page
    By myfriendtodd in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-19-2009, 03:01 PM
  5. Replies: 1
    Last Post: 07-28-2006, 08:19 AM

Bookmarks

Posting Permissions

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