Hi guys,

Just need help on this one,

The page I'm developing is gonna be uploaded using DART for publishers when done but when tested locally using Safari 5 on a mac desktop instead of playing the video, it shows the HTML tags on the player, been looking for answers but still can;t find any, hope yopu could help

<!-- HTML 5 Ad Template from DoubleClick by Google -->

<!DOCTYPE html>

<html lang="en">

<head>
<!-- Studio Enabler Required -->
<script src="http://s0.2mdn.net/879366/Enabler_01_09.js"
	type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript">
		//Initialize Enabler
		if (Enabler.isInitialized()) {
			init();
		} else {
			Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
		}
		//Run when Enabler is ready
		function init() {
			/*
			//Load in Javascript	
			var extJavascript = document.createElement('script');
  			extJavascript.setAttribute('type', 'text/javascript');
  			extJavascript.setAttribute('src', Enabler.getFilename('http://interactive.affinityexpress.com/scandia-ipad-ad/script_236x390.js')); //Name of your Javascript File
			document.getElementsByTagName('head')[0].appendChild(extJavascript);
			
			//Load in CSS
			var extCSS=document.createElement('link');
  			extCSS.setAttribute("rel", "stylesheet");
  			extCSS.setAttribute("type", "text/css");
  			extCSS.setAttribute("href", Enabler.getFilename("http://interactive.affinityexpress.com/scandia-ipad-ad/style_300x600.css")); //Name of your CSS File
			document.getElementsByTagName("head")[0].appendChild(extCSS);
  			*/
		}
	</script>
	<style>
		@-webkit-keyframes slideBg { 
			0% { -webkit-transform: translate(0,-800px);  }
			100% { -webkit-transform: translate(0,0); }
		}
		@-webkit-keyframes slideBg { 
			0% { -webkit-transform: translate(0,-800px);  }
			100% { -webkit-transform: translate(0,0); }
		}
		@-webkit-keyframes slideFromRight { 
			0% { -webkit-transform: translate(500px,0);  -webkit-timing-function:ease-in; }
			100% { -webkit-transform: translate(0,0);  -webkit-timing-function:ease-in;   }
		}
		@-webkit-keyframes slideFromLeft { 
			0% { -webkit-transform: translate(-500px,0);  -webkit-timing-function:ease; }
			100% { -webkit-transform: translate(0,0); -webkit-timing-function:ease-in; }
		}
		@-webkit-keyframes scaleDown { 
			0% {  opacity: 0; -webkit-transform: scale(0); }
			20% {   opacity: 0; -webkit-transform: scale(0); }
			40% {  opacity: 0; -webkit-transform: scale(2); }
			60% {  opacity: 0; -webkit-transform: scale(2); }
			80% {  opacity: 0; -webkit-transform: scale(2); }
			100% {  opacity: 1; -webkit-transform: scale(1.0); }
		}
		@-webkit-keyframes scaleUp { 
			0% {   -webkit-transform: scale(0); }
			20% { -webkit-transform: scale(0); }
			40% { -webkit-transform: scale(0); }
			60% { -webkit-transform: scale(0); }
			80% { -webkit-transform: scale(0); }
			100% { -webkit-transform: scale(1.0); }
		}
		@-webkit-keyframes fadeIn { 
			0% {   opacity: 0;  }
			100% { opacity: 1; }
		}
		@-webkit-keyframes showVideo { 
			0% {   opacity: 0; display: none;  }
			100% { opacity: 1; display: block; }
		}
		@-webkit-keyframes changeScale { 
		 0% { -webkit-transform: scale(0); }
		 100% { -webkit-transform: scale(1.0); }
		}
		#ad_container{ position:relative; width: 748px; height: 877px; background-color: #000000; overflow: hidden; display: none;}
		.bg{ position: absolute; -webkit-animation-name: slideBg; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1;}
		.copy{ position:absolute; z-index: 3; color: #cccc99; text-transform: normal; font-family:Arial, Helvetica, sans-serif; font-size: 18px;  top: 460px; left: 230px; text-align: center;  -webkit-animation-name: changeScale; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1;  -webkit-animation-fill-mode: both; -webkit-animation-delay: 2s;}
		.logo{ position:absolute; z-index:2; top: 92px; -webkit-animation-name: scaleUp; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; left: 90px;}
		.fadeOut{ opacity: 1;   -webkit-transition-property: opacity; -webkit-transition-duration: 10s;}
		.youtube-player { position:absolute; right: -600px /*66px*/; top: 282px; z-index: 32; background: #000; }
		.youtube-player, .youtube-player video {  height: 449px; width: 595px; } 
		.overlay{ display: block; background: #3a3a3a; opacity: 0.5; width: 100%; height: 100%; position :absolute; top: 0; left: 0; z-index: 26; }
		.replay{position:absolute;z-index: 3;}
		.youtubeButtons{ font-family:Arial; font-size: 22px; padding: 8px 18px; text-decoration: none;  background-color: white; color: black; position: absolute;  bottom: 78px; left: 134px;  background-color:#7b9943; z-index: 22; width: 450px; text-align: center;  -webkit-border-radius: 20px; -moz-border-radius: 20px;}
		#loader {}
		.youtubeButtons a,.youtubeButtons a:link,.youtubeButtons a:visited,.youtubeButtons a:hover { color: #fff; text-decoration: none;}
		.home-link{ position: absolute; bottom: 29px; left: 185px; color: #fff; font-size: 21px; z-index: 22; font-family: Arial; text-decoration: none; }
		.left{ -webkit-animation-name: slideFromLeft; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1;}
		.right{  -webkit-animation-name: slideFromRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; }
		.changeScale { -webkit-animation-name: changeScale; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1;  -webkit-animation-fill-mode: both; -webkit-animation-delay: 1s;  }
		.fadeIn { -webkit-animation-name: fadeIn; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1;  -webkit-animation-fill-mode: both; -webkit-animation-delay: 1.5s; }
		.showVideo{ -webkit-animation-name: showVideo; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1;  -webkit-animation-fill-mode: both; -webkit-animation-delay: 3s; }
		.couch { position: absolute; left: 100px; bottom: 142px; z-index: 22; }
		.platform{ position: absolute; bottom: 0; }
	</style>	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
	<script>
	$(window).load(function(){
		$('#loader').show();	
		$('#ad_container').show();	
		$('#source-mp4').attr('src','http://interactive.affinityexpress.com/scandia-ipad-ad/scandia-ipad-ad.mp4');		
		setTimeout(function(){
			$('.logo').animate({
				width: 400,
				left: 176,
				top: 20
			},500,function(){
				$('.youtube-player').css('right',75);
			});
			$('.copy').animate({top:230}, 500);
		}, 8000);
	});
	</script>
</head>

<body style="margin: 0; padding: 0;">
	
	<img id="loader" style="position:absolute; z-index: -1; top: 49%; left: 49%;" src="http://interactive.affinityexpress.com/scandia-ipad-ad/ajax-loader.gif" />
	<div id="ad_container">
		<p class="copy">
			Designed to be versatile, built to last.
		</p>
		<img src="http://interactive.affinityexpress.com/scandia-ipad-ad/logo_748x887.png" class="logo changeScale"/> 
		<img src="http://interactive.affinityexpress.com/scandia-ipad-ad/BG_748x887.png" class="bg" />
		<img src="http://interactive.affinityexpress.com/scandia-ipad-ad/couch_748x887.png" class="couch left" />
		
		<div class="youtube-player" style="z-index: 50;">
			<video id="movie"  controls="controls" preload="auto">
				<source id="source-mp4" src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
				<source src="http://interactive.affinityexpress.com/scandia-ipad-ad/scandia-ipad-ad.ogv" type='video/ogg; codecs="theora, vorbis"' />
				<source src="http://interactive.affinityexpress.com/scandia-ipad-ad/scandia-ipad-ad.webm" type='video/webm; codecs="vp8, vorbis"' />
			</video>
		</div>
			
		<div class="youtubeButtons right">
			<a href="%chttp://www.scandiafurniture.com" class="videoShow" target="_blank">visit us at http://www.scandiafurniture.com</a>
		</div>
				
		<img src="http://interactive.affinityexpress.com/scandia-ipad-ad/platform_748x887.png" class="platform"></div>
	


</body>

</html>
Member Avatar for stbuchok

What codec does Safari use? If it's mp4 you have no source for mp4.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.