YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

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

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

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 260
Εγγραφή: 30 Αύγ 2007 23:32

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από philos » 24 Ιουν 2016 20:46

Γεια σας παιδιά!

Έχω μια ερώτηση: υπάρχει κάποιο plugin σε javascript/jquery που να μου επιτρέπει να φτιάξω μια φόρμα στην οποία προσθέτω youtube videos?

Συγκεκριμένα έχω στο μυαλό μου να υπάρχει ένα text field όπου εισάγεις ένα youtube video url, πατάς μετά ένα κουμπάκι "Add" ξέρω γω, και το βίντεο προστίθεται στην html φόρμα μαζί με την εικόνα - preview του. Εμφανισιακά/χρηστικά εννοώ κάτι σαν image uploader όπου αφού ανεβαίνουν οι εικόνες, βλέπουμε thumbnails τους. Όμως εδώ μιλάμε για απλό add, youtube urls σε μια φόρμα.

Το ζητούμενο είναι στο τέλος όταν ο χρήστης κάνει submit τη φόρμα, να σταλθούν σε php αρχείο όλα τα youtube urls που πρόσθεσε.
Καμιά ιδέα; :)

Έκανα διάφορες αναζητήσεις στο google αλλά δεν ξέρω πως ακριβώς να το ψάξω.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από korgr » 24 Ιουν 2016 22:29

Ειλικρινά αν μάθω πως υπάρχει κάτι τέτοιο έτοιμο και πως έριξα τόση δουλειά τζάμπα στην επισύναψη videos σε κάθε άρθρο στο CMS μου, θα κλαίω :D

Βέβαια το έκανα να υποστηρίζει εκτός από youtube, vimeo και dailymotion

Δυστυχώς στηρίζεται στο Odyssey Framework και δεν μπορεί να λειτουργήσει ως ανεξάρτητο plugin
Συνημμένα
videos.png

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από gvre » 25 Ιουν 2016 00:13

philos έγραψε:Γεια σας παιδιά!

Έχω μια ερώτηση: υπάρχει κάποιο plugin σε javascript/jquery που να μου επιτρέπει να φτιάξω μια φόρμα στην οποία προσθέτω youtube videos?

Συγκεκριμένα έχω στο μυαλό μου να υπάρχει ένα text field όπου εισάγεις ένα youtube video url, πατάς μετά ένα κουμπάκι "Add" ξέρω γω, και το βίντεο προστίθεται στην html φόρμα μαζί με την εικόνα - preview του. Εμφανισιακά/χρηστικά εννοώ κάτι σαν image uploader όπου αφού ανεβαίνουν οι εικόνες, βλέπουμε thumbnails τους. Όμως εδώ μιλάμε για απλό add, youtube urls σε μια φόρμα.

Το ζητούμενο είναι στο τέλος όταν ο χρήστης κάνει submit τη φόρμα, να σταλθούν σε php αρχείο όλα τα youtube urls που πρόσθεσε.
Καμιά ιδέα; :)

Έκανα διάφορες αναζητήσεις στο google αλλά δεν ξέρω πως ακριβώς να το ψάξω.
Δε χρειάζεσαι plugin για κάτι τέτοιο, καθώς η υλοποίηση είναι απλή. Για να πάρεις το thumbnail, δες εδώ. Με το add, προσθέτεις ένα box* που έχει την εικόνα και ένα hidden input array με το url. Με το submit, στέλνεις το array και είσαι έτοιμος.

* πχ.

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

<div class="video-box">
    <img src="...">
    <span>video url</span>
    <input type="hidden" name="videos&#91;&#93;" value="...">
    <a>DELETE</a>
</div>

Άβαταρ μέλους
philos
Δημοσιεύσεις: 260
Εγγραφή: 30 Αύγ 2007 23:32

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από philos » 25 Ιουν 2016 01:17

Ευχαριστώ πολύ για τις απαντήσεις παιδιά!
Με λίγη έρευνα και στο διαδίκτυο, συν την παραπάνω πρόταση, κατάφερα και έστησα το παρακάτω.
Θα ελέγξω αύριο αν λειτουργεί σωστά η αποστολή μέσω φόρμας (αναφέρομαι στο πεδίο name="videos[]" ). Ελπίζω να λειτουργεί σωστά, παρά τον συγκεκριμένο τρόπο διαγραφής βίντεο από τη λίστα.

Ο κώδικας είναι ανοιχτός για διορθώσεις/βελτιώσεις/προτάσεις! :)

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

<html>
<head>
<script type="text/javascript" src="https&#58;//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function youtube_parser&#40;url&#41;
&#123;
    var regExp = /^.*&#40;&#40;youtu.be\/&#41;|&#40;v\/&#41;|&#40;\/u\/\w\/&#41;|&#40;embed\/&#41;|&#40;watch\?&#41;&#41;\??v?=?&#40;&#91;^#\&\?&#93;*&#41;.*/;
    var match = url.match&#40;regExp&#41;;
    return &#40;match&&match&#91;7&#93;.length==11&#41;? match&#91;7&#93; &#58; false;
&#125;

function delete_video&#40;videoid&#41;
&#123;
	$&#40;"#" + videoid&#41;.html&#40;''&#41;;
&#125;

function add_youtubevideo&#40;&#41;
&#123;
	var geturl = $&#40;"#youtubeurl"&#41;.val&#40;&#41;;
	var youtubevideoid = youtube_parser&#40;geturl&#41;;
	
	if &#40;youtubevideoid&#41;
	&#123;
		$&#40;"#videos"&#41;.html&#40;$&#40;"#videos"&#41;.html&#40;&#41; + '<div class=\"video-box\" id=\"' + youtubevideoid + '\"><div><img src=\"http&#58;//img.youtube.com/vi/' + youtubevideoid + '/2.jpg\"><span>' + geturl + '</span><input type=\"hidden\" name=\"videos&#91;&#93;\" value=\"' + youtubevideoid + '\"></div><div><a href=\"#\" onclick="delete_video&#40;\'' + youtubevideoid + '\'&#41;;">DELETE</a></div></div>'&#41;;
		$&#40;"#youtubeurl"&#41;.val&#40;''&#41;;
	&#125;
	else
	&#123;
		alert&#40;'Please specify a correct YouTube Video URL!'&#41;;
	&#125;
&#125;
</script>

</head>
<body>
<input type="text" style="width&#58; 350px;" id="youtubeurl" placeholder="Copy and paste a YouTube Video URL" /><input type="button" class="button" onclick="add_youtubevideo&#40;&#41;;" value="ADD" />

<div id="videos"></div>

</body>
</html>

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από gvre » 25 Ιουν 2016 12:01

Δες το jQuery.append
Επίσης, στην html 4 τα ids πρέπει να ξεκινούν με γράμμα [A-Za-z] (στην html 5 δεν υπάρχει αυτός ο περιορισμός), οπότε καλό είναι να προσθέσεις ένα prefix στο id (πχ. video-).

Άβαταρ μέλους
philos
Δημοσιεύσεις: 260
Εγγραφή: 30 Αύγ 2007 23:32

YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images

Δημοσίευση από philos » 26 Ιουν 2016 17:18

Thanks παιδιά!
Και με το append προσθέτω νέα στοιχεία στη φόρμα, με πεδία κειμένου. :)

Απάντηση

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

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

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