HTML5 Mobile Banner ?

[AnimeFevers]

Hey, having some problems with my html5 banner code on apple devices, basically I want the .mp4 to autoplay and loop how it should, on desktop the code works fine but on apple devices it doesn't autoplay and shows a big play button in the centre.

Willing to pay $10 paxum if someone can figure this out quickly

This is my code.

<a href="%url0%" target="_blank"><video width="300" height="100" preload="auto" src="http://INSERT_YOUR_MP4.mp4" loop="loop" autoplay="autoplay" muted="muted"></video></a>

[Konda]

need to use js to make it happen on iOS, not sure if it still works but try this one
https://www.easy-bits.com/iphone-inline-video-autostart

[AnimeFevers]

Originally Posted by Konda

need to use js to make it happen on iOS, not sure if it still works but try this one
https://www.easy-bits.com/iphone-inline-video-autostart

Thanks, it auto plays on my iphone but it's not looping.

[blackmonsters]

Originally Posted by AnimeFevers

Thanks, it auto plays on my iphone but it's not looping.

Try what I just wrote for you :

<a href="http://somesite.com" target="_blank"><video id=bannervid width="300" height="100" preload="auto" src="somevideo.mp4" loop="loop" autoplay="autoplay" muted="muted" ></video></a>


<script>
function vidloop() {

	bannervid.currentTime=0;
	bannervid.play();
} 

(function() {
	document.addEventListener("DOMContentLoaded", bannervid, false); 
	bannervid = document.getElementById("bannervid");
	bannervid.addEventListener("ended", vidloop, false);
	function bannervid() {  
		if (bannervid.canPlayType) {  
			bannervid.play();

		}
	}
})();


</script>

[RyuLion]

Originally Posted by blackmonsters

Try what I just wrote for you :

<a href="http://somesite.com" target="_blank"><video id=bannervid width="300" height="100" preload="auto" src="somevideo.mp4" loop="loop" autoplay="autoplay" muted="muted" ></video></a>


<script>
function vidloop() {

	bannervid.currentTime=0;
	bannervid.play();
} 

(function() {
	document.addEventListener("DOMContentLoaded", bannervid, false); 
	bannervid = document.getElementById("bannervid");
	bannervid.addEventListener("ended", vidloop, false);
	function bannervid() {  
		if (bannervid.canPlayType) {  
			bannervid.play();

		}
	}
})();


</script>

Nice man! I didn't know you knew HTML5, That's what I'm learning now..

[blackmonsters]

Originally Posted by RyuLion

Nice man! I didn't know you knew HTML5, That's what I'm learning now..

Thanks.

[blackmonsters]

Originally Posted by AnimeFevers

Hey, having some problems with my html5 banner code on apple devices, basically I want the .mp4 to autoplay and loop how it should, on desktop the code works fine but on apple devices it doesn't autoplay and shows a big play button in the centre.

Willing to pay $10 paxum if someone can figure this out quickly

This is my code.

<a href="%url0%" target="_blank"><video width="300" height="100" preload="auto" src="http://INSERT_YOUR_MP4.mp4" loop="loop" autoplay="autoplay" muted="muted"></video></a>

Well, did it work?

I'd be happy to get $10. (I have paypal not paxum)

[AnimeFevers]

Originally Posted by blackmonsters

Well, did it work?

I'd be happy to get $10. (I have paypal not paxum)

Sorry just got back to the thread, I tried your code and it doesn't seem to work

[blackmonsters]

Originally Posted by AnimeFevers

Sorry just got back to the thread, I tried your code and it doesn't seem to work

What part doesn't work?

Did you make sure the video tag has "id=bannervid"?

That's required for it to work; if you didn't copy my entire code then that's the problem.

[AnimeFevers]

I think I may just have to use this for ios D: Video to animated GIF converter

[AnimeFevers]

Originally Posted by blackmonsters

What part doesn't work?

The mp4 wasn't auto playing.

[Colmike9]

iOS9 requires a gesture before <video> plays.
iOS10 is more lenient, but still has these requirements:

"<video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:

<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport."

[AnimeFevers]

Originally Posted by blackmonsters

What part doesn't work?

Did you make sure the video tag has "id=bannervid"?

That's required for it to work; if you didn't copy my entire code then that's the problem.

Yep I am 100% sure.

Your code works it's just not doing what I need it to do on ios (auto play, loop)

[blackmonsters]

Originally Posted by AnimeFevers

Yep I am 100% sure.

Your code works it's just not doing what I need it to do on ios (auto play, loop)

OK, try this : Change the link and video url of course.

<a href="http://google.com" target="_blank"><video id=bannervid preload="auto" width="300" height="100" preload="auto" src="soultrain.mp4" loop="loop" autoplay="autoplay" muted="muted"></video></a>


<script>
function vidloop() {
	bannervid.currentTime=0;
	bannervid.play();
} 

window.onload = function(){ 
	bannervid = document.getElementById("bannervid");
	bannervid.addEventListener("ended", vidloop, false);
	setTimeout(playitnow, 1300); 
}
function playitnow() {
	bannervid.volume=0;
	bannervid.play();
}
</script>

[Colmike9]

Which iOS version are you testing?

[AnimeFevers]

Originally Posted by blackmonsters

OK, try this : Change the link and video url of course.

<a href="http://google.com" target="_blank"><video id=bannervid preload="auto" width="300" height="100" preload="auto" src="soultrain.mp4" loop="loop" autoplay="autoplay" muted="muted"></video></a>


<script>
function vidloop() {
	bannervid.currentTime=0;
	bannervid.play();
} 

window.onload = function(){ 
	bannervid = document.getElementById("bannervid");
	bannervid.addEventListener("ended", vidloop, false);
	setTimeout(playitnow, 1300); 
}
function playitnow() {
	bannervid.volume=0;
	bannervid.play();
}
</script>

The banner seems to be broken when I try this code

Originally Posted by Colmike7

Which iOS version are you testing?

The latest version, I'm testing these codes with ios 10.2

[blackmonsters]

Originally Posted by AnimeFevers

The banner seems to be broken when I try this code

Show me the webpage because the code works.

You're not helping us help you if you don't show us a webpage with the problem.
You can send the link on private message if you have to.

[blackmonsters]

..