יש יכולת טובה מאוד להפעיל אוטומטית אודיו ווידאו באינטרנט, והיא כפופה להגבלות שונות בפלטפורמות שונות.
כיום, רוב הדפדפנים במחשבים מאפשרים תמיד להפעיל דפי אינטרנט <video> או <audio> באמצעות JavaScript ללא אינטראקציה מצד המשתמש.
עם זאת, רוב הדפדפנים בניידים דורשים תנועת משתמש מפורשת לפני שניתן יהיה להפעיל JavaScript ביוזמתו. כך ניתן להבטיח שמשתמשים בנייד, שרבים מהם משלמים על רוחב פס או נמצאים בסביבה ציבורית, לא יתחילו בטעות להוריד ולהפעיל מדיה ללא אינטראקציה מפורשת עם הדף.
בעבר היה קשה לקבוע אם נדרשת אינטראקציה של משתמש כדי
להתחיל את ההפעלה, ולזהות כשלים שקרו כשניסיון ההפעלה (האוטומטי) נכשל. קיימים פתרונות אפשריים, אבל הם פחות אידאליים. עבר כבר זמן רב מאוד שיפור בשיטת play() הבסיסית לטיפול באי-הוודאות הזו, ועכשיו הוא התפתח לפלטפורמת האינטרנט, באמצעות הטמעה ראשונית בגרסה Chrome 50.
קריאה ל-play() ברכיב <video> או <audio> מחזירה עכשיו 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 שתומך בממשק הזה שמבוסס על Promise. אזהרה: הדף ישמיע מוזיקה באופן אוטומטי כשתבקרו בו. (אלא אם זה כמובן!)
אזור הסכנה
ב-<source> בתוך <video>, ההבטחה של play() לא תידחה אף פעם
עבור <video src="not-existing-video.mp4"\>, ההבטחה play() תידחה כמצופה כי הסרטון לא קיים. לגבי <video><source src="not-existing-video.mp4" type='video/mp4'></video>, ההבטחה play()
לא תידחה אף פעם. הבדיקה קורית רק אם אין מקורות תקפים.