HTML5 Mobile Banner ? - GoFuckYourself.com

AnimeFevers · 01-25-2017, 09:05 AM

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 · 01-25-2017, 09:18 AM

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 · 01-25-2017, 10:12 AM

Quote:

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 · 01-25-2017, 10:49 AM

Quote:

Originally Posted by AnimeFevers

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

Try what I just wrote for you :

Code:

<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 · 01-25-2017, 10:57 AM

Quote:

Originally Posted by blackmonsters

Try what I just wrote for you :

Code:

<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 · 01-25-2017, 11:10 AM

Quote:

Originally Posted by RyuLion

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

Thanks.

blackmonsters · 01-25-2017, 12:04 PM

Quote:

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 · 01-25-2017, 12:06 PM

Quote:

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 · 01-25-2017, 12:18 PM

Quote:

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 · 01-25-2017, 12:19 PM

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

AnimeFevers · 01-25-2017, 12:20 PM

Quote:

Originally Posted by blackmonsters

What part doesn't work?

The mp4 wasn't auto playing.

Colmike9 · 01-25-2017, 12:25 PM

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 · 01-25-2017, 12:26 PM

Quote:

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 · 01-25-2017, 12:49 PM

Quote:

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.

Code:

<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 · 01-25-2017, 12:58 PM

Which iOS version are you testing?

AnimeFevers · 01-25-2017, 01:42 PM

Quote:

Originally Posted by blackmonsters

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

Code:

<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

Quote:

Originally Posted by Colmike7

Which iOS version are you testing?

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

blackmonsters · 01-25-2017, 01:45 PM

Quote:

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 · 01-29-2017, 09:12 AM

01-25-2017, 09:05 AM	#1
AnimeFevers ♫ ♪ ♫ ♪ ▄ █ ▄ █ ▄ ▄ █ ▄ █ Industry Role: Join Date: Apr 2009 Location: Tell your mom, money is on the fridge Posts: 3,561	HTML5 Mobile Banner ? 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> __________________ tg - @LJFreeza email - animefevers(AT)hotmail(DOT)co(DOT)uk

01-25-2017, 12:19 PM	#10
AnimeFevers ♫ ♪ ♫ ♪ ▄ █ ▄ █ ▄ ▄ █ ▄ █ Industry Role: Join Date: Apr 2009 Location: Tell your mom, money is on the fridge Posts: 3,561	I think I may just have to use this for ios D: Video to animated GIF converter __________________ tg - @LJFreeza email - animefevers(AT)hotmail(DOT)co(DOT)uk

01-25-2017, 12:25 PM	#12
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	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." __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

01-25-2017, 12:58 PM	#15
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	Which iOS version are you testing? __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

01-29-2017, 09:12 AM	#18
blackmonsters Making PHP work Industry Role: Join Date: Nov 2002 Location: 🌎🌅🌈🌇 Posts: 20,652	.. __________________ Get paid, get tools, get going with Camsoda Join Chaturbate get your cut of the pie

01-25-2017, 09:18 AM	#2
Konda ... Industry Role: Join Date: Apr 2003 Posts: 2,280	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