In Chrome One video works, one doesn't

[chaoticgemini]

I am having an issue with html5 videos I have encoded for two.

Both videos work in firefox. Only one video works in google chrome.

My js is here:
// properties
var XML_PATH = "xml/config.xml";
var video_width;
var video_height;
var videos_array=new Array();


// init the application
function init()
{
// call loadXML function
loadXML();
}


// XML loading
function loadXML()
{
$.ajax({
type: "GET",
url: XML_PATH,
dataType: "xml",
success: function onXMLloaded(xml)
{
// set video_width and video_height
video_width=$(xml).find("videos").attr("width");
video_height=$(xml).find("videos").attr("height");

// loop for each item
$(xml).find('item').each(function loopingItems(value)
{
// create an object
var obj={title:$(this).find("title").text(), mp4:$(this).find("mp4").text(), ogg:$(this).find("ogg").text(), description:$(this).find("description").text()};
videos_array.push(obj);

// append <ul> and video title
$("#mycustomscroll").append('<ul>');
$("#mycustomscroll").append('<a><li id="item"><strong>'+(value+1)+"</strong><br/><strong>Title: </strong>"+obj.title+'</li></a>');
});

// close </ul>
$("#mycustomscroll").append('</ul>');
// append video tag player
$("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[0].mp4+'" type="video/mp4" /><source src="'+videos_array[0].ogg+'" type="video/ogg" />Your browser does not support the video tag.</video>');
// append description
$("#description").append(videos_array[0].description);

// call addListeners function
addListeners();
}
});
}

// add <li> listener
function addListeners()
{
// loop for each list item
$('#mycustomscroll li').each(function looping(index)
{
// onclick...
$(this).click(function onItemClick()
{
// empty left column and description
$("#leftcolumn").empty();
$("#description").empty();
// append video tag
$("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" type="video/mp4" /><source src="'+videos_array[index].ogg+'" type="video/ogg" />Your browser does not support the video tag.</video>');
// append description
$("#description").append(videos_array[index].description);
});
});
}

my css is here:
body
{
font-family: 'Droid Sans', 'Arial', sans-serif;
color: #6F7986;
font-size: 14px;
}

header
{
text-align: center;
}

footer
{

}

select
{
width: 240px;
}

#wrapper
{
margin: 0 auto;
width: 600px;
background-color:#000;
}

#leftcolumn
{
color: #333;
background-color: #000;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 3s68px;
width: 550px;
float: left;
}

#description
{
color: #333;
border: 1px solid #ccc;
background-color: #F2F2E6;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 100%;
width: 848px;
float: left;
}

#rightcolumn
{
display: inline;
position: relative;
float: right;
color: #666;
background-color: #000;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 318px;
width: 200px;
}

#mycustomscroll
{
list-style: none;
height: 298px;
overflow: auto;
position: relative;
background-color: #F2F2E6;
margin: 0.3em auto;
font-size: 12px;
}

#mycustomscroll li
{
font-size: 12px;
width: 230px;
background-color: #333;
color: #CCC;
padding: 5px;
margin: 10px;
cursor: pointer;
}

#mycustomscroll a
{
text-decoration: none;
}

#mycustomscroll a:hover li
{
background-color: #6F7986;
color: #FFF;
}

html is here:
<div>
<div id="leftcolumn">
<div id="wrapper">
</div>
</div>



<div id="rightcolumn">

<div id='mycustomscroll'>

</div>

</div>

</div>

xml is here:
<?xml version="1.0" encoding="UTF-8"?>
<videos width="848" height="368">
<item>
<title>Tear it Out</title>
<mp4>http://traumaslave.com/tearitout.mp4</mp4>
<ogg>http://traumaslave.com/tearitout.mp4</ogg>
</item>

<item>
<title>Answers to Nothing</title>
<mp4>http://css.flepstudio.org/demo/video_player/assets/videos/Answers_to_Nothing.mp4</mp4>
<ogg>http://css.flepstudio.org/demo/video_player/assets/videos/Answers_to_Nothing.ogv</ogg>
</item>
</videos>

as you can see, on is hosted at flepstudio.org, one is hosted on my website. I cannot figure out why the videos both work in firefox, but only the one hosted on flepstudio.org works in chrome. any ideas would be appreciated.

Thanks,

Jennifer Eckert

PS, I know my coding is very messy, so is my file arrangement. This is the primary stage of development for me.

The website where it is located is http://traumaslave.com/media.php

[absolutmgd13]

you need to set the proper MIME types in your .htaccess file.

AddType audio/ogg oga ogg
AddType video/ogg ogv


https://developer.mozilla.org/En/Med...video_elements