הפעלה אוטומטית של אודיו ווידאו באינטרנט היא יכולת חזקה, שמופעלות עליה הגבלות שונות בפלטפורמות שונות.
כיום, רוב הדפדפנים למחשבים תמיד יאפשרו לדפי אינטרנט להתחיל <video> או <audio> הפעלה באמצעות JavaScript בלי אינטראקציה מצד המשתמש.
עם זאת, ברוב הדפדפנים לנייד נדרשת מחווה מפורשת של המשתמש כדי להפעיל את ההפעלה שמתחילה ב-JavaScript. כך אפשר לוודא שמשתמשי מובייל, שרבים מהם משלמים על רוחב פס או נמצאים בסביבה ציבורית, לא יתחילו בטעות להוריד ולנגן מדיה בלי לבצע אינטראקציה מפורשת עם הדף.
בעבר היה קשה לקבוע אם נדרשת אינטראקציה של המשתמש כדי להפעיל את ההפעלה, ולזהות את הכשלונות שמתרחשים כשמתבצעת ניסיון הפעלה (אוטומטית) והיא נכשלת. יש כמה workarounds, אבל הם לא אידיאליים. הגיע הזמן לבצע שיפור בשיטה הבסיסית של play() כדי לטפל בבעיה הזו, והשיפור הזה הגיע עכשיו לפלטפורמת האינטרנט, עם הטמעה ראשונית ב-Chrome 50.
קריאה ל-play() ברכיב <video> או <audio> מחזירה עכשיו Promise. אם ההפעלה תתבצע בהצלחה, ה-Promise ימולא. אם ההפעלה תיכשל, ה-Promise יידחה עם הודעת שגיאה שמסבירה את הכשל. כך אפשר לכתוב קוד אינטואיטיבי כמו הקוד הבא:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
בנוסף לזיהוי אם השיטה play() הצליחה, הממשק החדש שמבוסס על הבטחה מאפשר לכם לקבוע מתי השיטה play() הצליחה. יש הקשרים שבהם דפדפן אינטרנט עשוי להחליט לעכב את תחילת ההפעלה. לדוגמה, ב-Chrome למחשב, ההפעלה של <video> לא תתחיל עד שהכרטיסייה תהיה גלויה. ה-Promise לא ימולא עד שההפעלה תתחיל בפועל, כלומר הקוד ב-then() לא יבוצע עד שהמדיה תופעל. שיטות קודמות לקביעת הצלחת הקריאה של play(), כמו המתנה למשך זמן מוגדר לאירוע playing והנחה על כשל אם הוא לא מופעל, חשופות לתוצאות שליליות שגויות בתרחישים של הפעלה מושהית.
פרסמנו דוגמה פעילה לפונקציונליות החדשה הזו. אפשר להציג אותו בדפדפן כמו Chrome 50 שתומך בממשק מבוסס-ההבטחה הזה. חשוב לדעת: כשנכנסים לדף, המוזיקה מתחילה להתנגן באופן אוטומטי. (אלא אם הוא לא עושה זאת, כמובן).
אזור מסוכן
<source> בתוך <video> יוצרת את ההבטחה play() לעולם לא דוחה
עבור <video src="not-existing-video.mp4"\>, ההבטחה של play() נדחית כצפוי כי הסרטון לא קיים. עבור <video><source src="not-existing-video.mp4" type='video/mp4'></video>, ההבטחה של play() אף פעם לא נדחית. זה קורה רק אם אין מקורות תקינים.