HTML5 Video problem

Question

ddemesa 0 Newbie Poster

13 Years Ago

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>

html-css web-design

2 Contributors
1 Reply
92 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by stbuchok

Reply to this topic

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.

stbuchok · Answer 1 · 2011-07-15T01:21:39+00:00

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