הוספת וידאו בדף: השתמש ב- JavaScript ובבזק
הוספת וידאו בדף: השתמש ב- JavaScript ובבזק
לפני כמה זמן הזכרתי את תג הווידאו, מיושם במיוחד ב- HTML5. עם זאת, למרבה הצער, השימוש בתג יגרום לאי נוחות רבה יותר מאשר לתועלת. לכן, אני אגיד לך על הדרך שבה אתה יכול לעשות לחלוטין עם פורמט וידאו אחד.
עבור פרויקט אחד הייתי צריך למצוא את האפשרות של פריקת קטעי וידאו באתר. זה לא היה אפשרי להפוך את שחקן מהתחלה על הבזק (ראשית, אין לי סביבת פיתוח ולא סיפקה את זה), ולכן היה צורך, למעשה, כדי למצוא מועמד מתאים מול נגן פלאש. דבר מסובך במיוחד היה נדרש, שכן בזכות משתמשי YouTube קל מאוד לנווט זה סוג של שחקנים;)
2 מועמדים הממוקמים באתרים flv-mp3.com (פרויקט מ uppod'a) ו Flowplayer . לאחר שנעשה כל אחד קטן, הראשון היה נטוש במהירות לטובת קומביין לספק את ה- API הנוכחי. כפי שהראה הזמן, המעיים הפנימיים לא הניחו לי לרדת (אם כי כמה אנשים הצליחו להיכנס vtyuhat flv-mp3.com).
כפי שאתה יודע, הרושם הראשוני הוא מטעה למדי, ואת ההעדפה ניתן לפעמים את המכשיר רווי לפחות (במיוחד אם הוא משתמש בשפה יליד). זו גישה זו היה ביקוש על FLV-MP3: השירות מספק את ההזדמנות "להרכיב" שחקן עם המאפיינים שצוינו (ב טופס לציין את הקובץ להיות שיחק, שומר המסך, מידות וכמה פרמטרים אחרים) ולקבל את קוד הפלט כדי להכניס את הקובץ. כן, האפשרות אולי נראה מאוד נוח, במיוחד עבור אנשים לשקול HTML מכשפה חזקה, שלא לדבר על js וכן הלאה.
רק תוספת תקופתית של קטעי וידאו לאתר אינה צפויה לתרום את ההתלהבות של כל הזמן "בניית" השחקן עצמו. לחילופין, תוכל לחקור את כל ההגדרות ולהפוך אותן לאוטומטיות באמצעות שפת השרת. אבל עיקרון זה יכול רק להיקרא מעוות (זה הרבה יותר קל לטעון קטעי וידאו ב- YouTube ולקבל את הקוד מוכן להורדה).
כאן אנו מגיעים אל עצם הדבר שכבר ניתן לכנותו במלואה כמכשפת. ��תה רוצה להבין את הקסם javascript? אני אראה שזה בכלל לא קשה (אפילו קל יותר מאשר באמצעות בנאי). ולעזור עם זה flowpler. אתה יכול לבחור גרסה מכאן , אבל את הגירסה הראשונה מאוד כי הוא מופץ תחת GPL3 הוא מתאים למדי עבור האתר שלך.
הנגן תומך בהפעלה של התוכן הבא: FLV, mp4, m4v (לתמונות - jpg, gif, png). הסרטון נתמך מאז גרסה 9, כך שלא יהיו בעיות תמיכה.
הורד את הארכיון עם השחקן לפרוק אותו. יהיה עליך להעלות 3 קבצים לאתר: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf ו- example / flowplayer-NumVer.min.js , כאשר NumVer הוא מספר הגירסה בלבד, והוא עשוי להיות, לדוגמה, 3.2.7 .
הקובץ הראשון מכיל את לוח הבקרה, השני - ישירות את השחקן השלישי הוא הקישור המספק API. שני הקבצים הראשונים (* .swf) חייבים להיות באותה תיקייה. עכשיו הגיע הזמן לקוד הפשוט ביותר. זה עשוי להיות:
<div = id = "player" = "style =" script = type = "text / javascript" = "src =" / src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>אלמנט div עם מזהה השחקן הוא הכלי שבו הסרטון יבוטל. בשורה השנייה הוא חיבור הקובץ javascript. ישירות עבור הפלט הוא אחראי אחד flowpler תפקוד () , אשר עובר 3 פרמטרים:
- המזהה של הרכיב שבו יש להפעיל את הסרטון;
- הנתיב אל הנגן (כלומר אל הנגן, ולא אל הפקדים שיטענו אוטומטית);
- כמה פרמטרים נוספים.
אגב, בנוסף למזהה, ניתן להעביר ישירות הפניה לאובייקט או לבורר.
הקוד לעיל אינו מציג שום דבר, אבל זה נותן מושג על כמה קל לחבר flowfler לדף. כדי פלט וידאו, אתה צריך ליצור פרמטר שלישי, וזה, אגב, הוא גם די פשוט.
לפשטות: הפרמטר השלישי (config) הוא מערך אסוציאטיבי שבו ניתן לתאר את האלמנטים הבאים:
- קליפ - באמצעות מקש זה, אתה יכול "לעשות" הגדרות גלובליות, למשל, אם אתה רוצה להתחיל אוטומטית buffering (AutoBuffering) או משחק (autoPlay), כיצד לשנות את גודל התוכן (קנה מידה עם שווי בכושר ישמור את יחס הממדים המקורי, עבור וידאו רגיל ישמש, אולי רק את זה). ניתן גם לציין את הקובץ להיות מופעל (url), ואפילו להשעות אירועים (פונקציות שייקראו, למשל, כאשר הסרט מתחיל לשחק);
- רשימת השמעה היא מערך קבוע (רשימה). כל אלמנט יכול להיות מחרוזת (במקרה זה, מחרוזת היא כתובת של קליפ להיות שיחק), או מערך אסוציאטיבי. במקרה השני, ניתן להציג את מערך הנתונים כמערכת נתונים הדומה למפתח הקליפ מהפריט הקודם, כלומר, ניתן להגדיר לשימוש במאגר, להתחיל לשחק וכן הלאה;
- plugins - משמש להרחבת תכונות סטנדרטיות. אחת התכונות היא היכולת Russify הממשק הנכון על המקום.
עכשיו דוגמה קטנה הכוללת הדגמה של האפשרויות:
<div = id = "player" = "style =" script = type = JavaScript / src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script = type / javascript>> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : '{url:' https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg ', autoBuffering: true, autoPlay: true},' http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // כדי לתפעל את פקדי plugins: {בקרות: {url:' flowplayer.controls-3.2.16.swf ', פלייליסט: false , / / מסיר לחצני החזרה לאחור: true, // הוסף כפתור להפסיק scrubber: true // שקר משבית את הגלילה של הווידאו}}}; </ script>הקוד המוצג קובע את ההגדרות הבאות: הפעלה אוטומטית של הפעלה אוטומטית, השבתת מאגרים אוטומטית, שינוי קנה מידה של וידאו כך שיתאים לחלון. כקובץ להפעלה, נעשה שימוש בתמונה ובווידאו, וההגדרות עבור התמונה יבוטלו (כיוון שיש לטעון אותה באופן אוטומטי). כאשר אתה לוחץ על התמונה (או על לחצן ההפעלה), הווידאו מוצג. כפי שאתם יכולים לראות, הכל פשוט מאוד. אם ברצונך להוסיף סרטון וידאו נוסף, הוסף פריט חדש לפלייליסט, מופרד באמצעות פסיק. אם נדרשת השמעה אוטומטית של רשימת ההשמעה, בקליפ המערך האסוציאטיבי מוגדר, הערך של AutoPlay מוגדר ל- true.
תיעוד המכיל פונקציות API נמצא כאן . אם מישהו לא מבין אנגלית - זה לא משנה, הכל די ברור שם. ולאחר ניתוח הקוד לעיל, זה בהחלט אפשרי להבין מה הוא הרציפים. אני מאוד ממליץ להציץ, בטוח תהיה "הגדרה" כי יהיה ביקוש.
דוגמה תסתכל כאן . אל תשכח להסתכל על קוד המקור (Ctrl + U)
מוציא לאור
לא מקוון שבוע