detect iPhone συσκευη

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 23 Μαρ 2014 21:15

Παιδιά καλησπέρα,

Στην home page ενός site υπάρχει ένα swf. O πελάτης όμως θέλει το συγκεκριμένο αρχείο να παίζει και σε iphone. Εκτός λοιπόν το flash αρχείο ανέβασα και ένα mp4. Μέσω javascript ελέγχω αν η συσκευή είναι ipad-iphone-ipod. Το θέμα όμως είναι ότι το αρχείο εξακολουθεί να μην παίζει σε iPhone.

Κώδικας: Επιλογή όλων

<script type="text/javascript">
var iOS = &#40; navigator.userAgent.match&#40;/&#40;iPad|iPhone|iPod&#41;/g&#41; ? true &#58; false &#41;;
if &#40;iOS==1&#41;&#123;
	document.write&#40;"<div id='home01'>"&#41;;
	document.write&#40;"<video width='640' height='360' background-color='#000000' autoplay loop>"&#41;;
	document.write&#40;"<source src='rolex.mp4' type='video/mp4'>"&#41;;
	document.write&#40;"</video>"&#41;;
	document.write&#40;"</div>"&#41;;
&#125;
else
&#123;
	document.write&#40;"<div id='home01'>"&#41;;
	document.write&#40;"<object data='rolex.swf' type='application/x-shockwave-flash' width='640' height='360'>"&#41;;
	document.write&#40;"<param name='movie' value='rolex.swf'>"&#41;;
	document.write&#40;"<param name='loop' value='true'>"&#41;;
	document.write&#40;"<param name='bgcolor' value='#000000'/>"&#41;;
	document.write&#40;"<!-- If flash is not installed -->"&#41;;
	document.write&#40;"<p>You need Adobe Flash Player to view this content</p>"&#41;;
	document.write&#40;"</object>"&#41;;
&#125;
	document.write&#40;"</div>"&#41;;
	document.write&#40;"<div id='home02'>"&#41;;
	document.write&#40;"<img height='360' width='300px' src='sites/all/themes/fusion/fusion_starter/images/rolexbanner.jpg' />"&#41;;
	document.write&#40;"</div>"&#41;;
</script>



ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από alou » 23 Μαρ 2014 22:13

Καταρχάς κλείνεις ένα div έξω από τα conditional που στην περίπτωση iphone έχει ήδη κλείσει οπότε πρέπει να το διορθώσεις σίγουρα.

Τα path να υποθέσω ότι είναι σωστά και για το flash και για το mp4? το πρόβλημα πoιο είναι, ότι δεν αναγνωρίζει userAgent? έκανες κάτι άλλο να το τσεκάρεις πχ alert? ή μήπως φταίει το encoding του video? πρέπει να δοκιμάσεις πράγματα για να απομονώσεις την αιτία.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 23 Μαρ 2014 22:28

αν κατάλαβα καλά, λές ότι πρέπει να γίνει έτσι

<script type="text/javascript">
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if (iOS==1){
document.write("<div id='home01'>");
document.write("<video width='640' height='360' background-color='#000000' autoplay loop>");
document.write("<source src='rolex.mp4' type='video/mp4'>");
document.write("</video>");
document.write("</div>");
document.write("</div>");
document.write("<div id='home02'>");
document.write("<img height='360' width='300px' src='sites/all/themes/fusion/fusion_starter/images/rolexbanner.jpg' />");
document.write("</div>");
}
else
{
document.write("<div id='home01'>");
document.write("<object data='rolex.swf' type='application/x-shockwave-flash' width='640' height='360'>");
document.write("<param name='movie' value='rolex.swf'>");
document.write("<param name='loop' value='true'>");
document.write("<param name='bgcolor' value='#000000'/>");
document.write("<!-- If flash is not installed -->");
document.write("<p>You need Adobe Flash Player to view this content</p>");
document.write("</object>");
document.write("</div>");
document.write("<div id='home02'>");
document.write("<img height='360' width='300px' src='sites/all/themes/fusion/fusion_starter/images/rolexbanner.jpg' />");
document.write("</div>");
}

</script>

επειδή δεν έχω iphone, χρησιμοποίησα έναν online emulator. Ενώ φαίνεται να παίζει στον emulator, είπα και σε έναν φίλο που έχει iphone να το δοκιμάσει. Αυτός μου είπε ότι δεν παίζει. Τώρα είτε δεν μπαίνει στην πρώτη συνθήκη και πάει να το τρέξει σε flash, είτε όπως λές είναι το encoding. Έκανα post τον κώδικα καθώς πίστευα ότι πιθανόν να εχω λάθος κάπου. Μάλλον θα δοκιμάσω αύριο σε φίλο που έχει iphone να το τρέξει, για να σιγουρευτώ ότι το αρχείο είναι ΟΚ και με alert για να σιγουρευτώ ότι μπαίνει μέσα στο if.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από alou » 24 Μαρ 2014 00:22

Εννοούσα να το κάνεις έτσι

Κώδικας: Επιλογή όλων

var iOS = &#40; navigator.userAgent.match&#40;/&#40;iPad|iPhone|iPod&#41;/g&#41; ? true &#58; false &#41;;
if &#40;iOS&#41;&#123;
	document.write&#40;"<div id='home01'>"&#41;;
	document.write&#40;"<video width='640' height='360' background-color='#000000' autoplay loop>"&#41;;
	document.write&#40;"<source src='rolex.mp4' type='video/mp4'>"&#41;;
	document.write&#40;"</video>"&#41;;
	document.write&#40;"</div>"&#41;;
&#125; else &#123;
	document.write&#40;"<div id='home01'>"&#41;;
	document.write&#40;"<object data='rolex.swf' type='application/x-shockwave-flash' width='640' height='360'>"&#41;;
	document.write&#40;"<param name='movie' value='rolex.swf'>"&#41;;
	document.write&#40;"<param name='loop' value='true'>"&#41;;
	document.write&#40;"<param name='bgcolor' value='#000000'/>"&#41;;
	document.write&#40;"<!-- If flash is not installed -->"&#41;;
	document.write&#40;"<p>You need Adobe link to Adobe Flash Player to view this content</p>"&#41;;
	document.write&#40;"</object>"&#41;;
	document.write&#40;"</div>"&#41;;
&#125; 

document.write&#40;"<div id='home02'>"&#41;;
document.write&#40;"<img height='360' width='300px' src='sites/all/themes/fusion/fusion_starter/images/rolexbanner.jpg' />"&#41;;
document.write&#40;"</div>"&#41;;
και μπορώ να σου πω με σιγουριά ότι παίζει σωστά η τιμή του boolean και λειτουργεί το conditional όπως θα έπρεπε, το δοκίμασα.
Αφενός θα πρέπει να δεις encoding, αφετέρου να έχεις υπόψιν ότι το video tag δεν υποστηρίζεται από IE8 και πριν και σε συνδυασμό με mp4 ίσως σε ακόμα περισσότερους.

Από το image path φαντάζομαι ότι είσαι σε drupal, γιατί τα κάνεις αυτά με javascript και όχι server side?

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 24 Μαρ 2014 10:42

ουπς..! το div δεν το είχα προσέξει.. πουλάκια κάναν τα μάτια μου χτες το βράδυ..
να έχεις υπόψιν ότι το video tag δεν υποστηρίζεται από IE8 και πριν και σε συνδυασμό με mp4 ίσως σε ακόμα περισσότερους.
ναι, είναι εις γνώση μου. Απλά σε αυτήν τη περίπτωση θα το χρησιμοποιήσω μόνο για iOS, οπότε όλοι οι υπόλοιποι με flash. Ίσως στην περίπτωση του mp4 θα έπρεπε να συμπεριλάβω και android συσκευές...
Από το image path φαντάζομαι ότι είσαι σε drupal, γιατί τα κάνεις αυτά με javascript και όχι server side?
Ναι σε Drupal είναι.. Δηλαδή πως να τα κάνω..; Δώσε μου αν θέλεις και έχεις χρόνο ενα παράδειγμα..

Λοιπόν σήμερα που το τσέκαρα με iPhone το video επαιξε μια χαρά αλλά όχι όπως θα ήθελα. Ουσιαστικά άνοιξε η σελίδα και στο <div> του video εμφανίστηκε ένα play button (το έχω στο autoplay όμως). Πατώντας το με πήγε σε player για να το αναπαράξει. Δεν μπορεί η αναπαραγωγή να γίνεται embed στη σελίδα μου;

Αυτή είναι η σελίδα

http://michas-watches.gr

ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από alou » 24 Μαρ 2014 11:41

dionisis71 έγραψε:
Λοιπόν σήμερα που το τσέκαρα με iPhone το video επαιξε μια χαρά αλλά όχι όπως θα ήθελα. Ουσιαστικά άνοιξε η σελίδα και στο <div> του video εμφανίστηκε ένα play button (το έχω στο autoplay όμως). Πατώντας το με πήγε σε player για να το αναπαράξει. Δεν μπορεί η αναπαραγωγή να γίνεται embed στη σελίδα μου;

Αυτή είναι η σελίδα

http://michas-watches.gr

ευχαριστώ
Για safari, θες το playsinline attribute, δοκίμασέ το κάπως έτσι:

Κώδικας: Επιλογή όλων

<video width='640' height='360' background-color='#000000'  autoplay='autoplay' loop webkit-playsinline>
Για το server side που έλεγα, υπάρχει κάποιο native drupal function που δεν θυμάμαι αλλά με απλή php το παίρνεις με $_SERVER['HTTP_USER_AGENT']

Με ένα regex ή stripos => boolean για ότι σε ενδιαφέρει είναι εύκολο και πιο σωστό να φτιάξεις την html σου από εκεί.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 24 Μαρ 2014 12:41

Πρόσθεσα και το webkit αλλά δεν φαίνεται να συγκινήθηκε..

Η σελίδα όταν έπαιζε με flash, καλούσε το swf έτσι

Κώδικας: Επιλογή όλων

&#91;swf file="http&#58;//www.mysite.gr/myfile.swf" params="width=640&&height=360" bgcolor="#000000"&#93;
λογικά θα πρέπει να υπάρχει αντίστοιχη function και για mpeg.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 24 Μαρ 2014 19:11

Μάλλον όσο και να ψάξω δεν πρόκειται να παίξει insite με autoplay..

https://developer.apple.com/library/saf ... tions.html

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από alou » 24 Μαρ 2014 20:26

Αυτό δεν έχει σχέση με το inline, για το auto play λογικό είναι πάντως αυτό.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

detect iPhone συσκευη

Δημοσίευση από dionisis71 » 24 Μαρ 2014 20:45

ναι και έχεις δίκιο..

εκτός από το inline χρειάζεται να οριστεί ένα property σε true, δεν έχω καταλάβει όμως που το βρίσκω..

http://stackoverflow.com/questions/6710 ... creen?rq=1

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες