freestuff.gr αρχική σελίδα
 FAQFAQ    ΑναζήτησηΑναζήτηση   Λίστα ΜελώνΛίστα Μελών   Ομάδες ΜελώνΟμάδες Μελών   <b>Εγγραφή Μέλους</b>Εγγραφή Μέλους 
 ΠροφίλΠροφίλ   Επιλογές μέλους Επιλογές   Τα bookmarks μου Τα bookmarks μου   Προσωπικά μηνύματαΠροσωπικά μηνύματα 
  διαφήμιση  

Καλώς ήρθατε στο forum μας! Για να συμμετάσχετε στις συζητήσεις θα πρέπει να είσαστε μέλος. Γίνετε μέλος τώρα!.

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


 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » JavaScript και Frameworks
Moderators:  Super-Moderators, WebDev Moderators
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 1 [6 Μηνύματα]      Bookmarks Tags: youtubeimageshtmlpreviewurls Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
ΑποστολέαςΜήνυμα
philos


Μέλος από: 30 Αυγ 2007
Μηνύματα: 250

View users profile
ΜήνυμαΣτις: 24 Ιουν 2016 19:46    Θέμα: YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images Απάντηση με παράθεση  Mark this post and the followings unread

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

Έχω μια ερώτηση: υπάρχει κάποιο 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

Μέλος από: 07 Οκτ 2008
Βοηθήματα: 5
Scripts: 2
Μηνύματα: 256+

Περιοχή: Corinth
View users profile
portfolio skype 
ΜήνυμαΣτις: 24 Ιουν 2016 21:29    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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

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



videos.png
 Description:
 Filesize:  132.46 KB
 Viewed:  45 Time(s)

videos.png



_________________
Projects: www.topgr.gr | www.ktizo.gr | Odyssey CMS | Οικονομική διαχείριση εσόδων-εξόδων
gvre


Μέλος από: 14 Οκτ 2010
Μηνύματα: 256+
Περιοχή: Ηράκλειο Κρήτης
View users profile Visit posters website
ΜήνυμαΣτις: 24 Ιουν 2016 23:13    Θέμα: Re: YouTube urls σε HTML φόρμα - ψάχνω χρηστικό εργαλείο με preview images Απάντηση με παράθεση  Mark this post and the followings unread

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[]" value="...">
    <a>DELETE</a>
</div>

_________________
Web Design Ηράκλειο - Κατασκευή Ιστοσελίδων Ηράκλειο - Web Development
philos


Μέλος από: 30 Αυγ 2007
Μηνύματα: 250

View users profile
ΜήνυμαΣτις: 25 Ιουν 2016 00:17    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function youtube_parser(url)
{
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}

function delete_video(videoid)
{
   $("#" + videoid).html('');
}

function add_youtubevideo()
{
   var geturl = $("#youtubeurl").val();
   var youtubevideoid = youtube_parser(geturl);
   
   if (youtubevideoid)
   {
      $("#videos").html($("#videos").html() + '<div class=\"video-box\" id=\"' + youtubevideoid + '\"><div><img src=\"http://img.youtube.com/vi/' + youtubevideoid + '/2.jpg\"><span>' + geturl + '</span><input type=\"hidden\" name=\"videos[]\" value=\"' + youtubevideoid + '\"></div><div><a href=\"#\" onclick="delete_video(\'' + youtubevideoid + '\');">DELETE</a></div></div>');
      $("#youtubeurl").val('');
   }
   else
   {
      alert('Please specify a correct YouTube Video URL!');
   }
}
</script>

</head>
<body>
<input type="text" style="width: 350px;" id="youtubeurl" placeholder="Copy and paste a YouTube Video URL" /><input type="button" class="button" onclick="add_youtubevideo();" value="ADD" />

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

</body>
</html>
gvre


Μέλος από: 14 Οκτ 2010
Μηνύματα: 256+
Περιοχή: Ηράκλειο Κρήτης
View users profile Visit posters website
ΜήνυμαΣτις: 25 Ιουν 2016 11:01    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

_________________
Web Design Ηράκλειο - Κατασκευή Ιστοσελίδων Ηράκλειο - Web Development
philos


Μέλος από: 30 Αυγ 2007
Μηνύματα: 250

View users profile
ΜήνυμαΣτις: 26 Ιουν 2016 16:18    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

Thanks παιδιά!
Και με το append προσθέτω νέα στοιχεία στη φόρμα, με πεδία κειμένου.
Εμφάνιση Μηνυμάτων:   
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 1 [6 Μηνύματα] Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » JavaScript και Frameworks
Τώρα είναι 31 Μαρ 2017 02:25 | All times are UTC + 2


Email This Page to Someone! add to Favorites

     Powered by p h p B B © 2001,2005 p h p B B Group
Για άμεση επικοινωνία με τον διαχειριστή του freestuff.gr στο email: freestuff.gr(παπάκι)gmail.com


Copyright © 1999-2013 Freestuff.gr All Rights Reserved  
Version Aegean, designed by N. Tsaganos