הפעלה אוטומטית של אודיו ווידאו באינטרנט היא יכולת חזקה, שמופעלות עליה הגבלות שונות בפלטפורמות שונות.
כיום, רוב הדפדפנים למחשבים תמיד יאפשרו לדפי אינטרנט להתחיל <video> או <audio> הפעלה באמצעות JavaScript בלי אינטראקציה מצד המשתמש.
עם זאת, ברוב הדפדפנים לנייד נדרשת תנועת משתמש מפורשת כדי להפעיל את ההפעלה שמתחילה ב-JavaScript. כך אפשר לוודא שמשתמשים בנייד, שרבים מהם משלמים על רוחב פס או נמצאים בסביבה ציבורית, לא יתחילו בטעות להוריד ולנגן מדיה בלי לבצע אינטראקציה מפורשת עם הדף.
בעבר היה קשה לקבוע אם נדרשת אינטראקציה של המשתמש כדי להתחיל את ההפעלה, ולזהות את הכשלונות שמתרחשים כשמתבצעת ניסיון הפעלה (אוטומטית) והיא נכשלת. יש כמה פתרונות זמניים, אבל הם לא אידיאליים. הגיע הזמן לבצע שיפור בשיטה הבסיסית של 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() הצליחה, הממשק החדש שמבוסס על Promise מאפשר לכם לקבוע מתי השיטה 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() אף פעם לא נדחית. זה קורה רק אם אין מקורות תקינים.