Html5 Video not working After ajax page loaded.

**iaa** · 07-25-2014, 06:36 PM

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

**molendijk** · 07-25-2014, 08:32 PM

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>

**iaa** · 07-25-2014, 09:57 PM

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.

**molendijk** · 07-26-2014, 09:28 AM

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>

**iaa** · 07-26-2014, 12:41 PM

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.

Thread: Html5 Video not working After ajax page loaded.

Thread Tools

Search Thread

Html5 Video not working After ajax page loaded.

Similar Threads

Javascript in ajax loaded page

JavaScript not working on AJAX loaded page

JS not working in Ajax loaded page

Query AJAX Loaded Page

how to apply js to externally loaded page (page loads via Ajax)

Bookmarks

Bookmarks

Posting Permissions