سوف أناقش في هذه المقالة ميزات الوسائط الجديدة للإصدار 73 من Chrome، والتي تشمل:
- مفاتيح وسائط الأجهزة متوافقة الآن للتحكم في تشغيل الوسائط على الكمبيوتر المكتبي.
- يمكن لمطوّري الويب الاستعلام عمّا إذا كان يمكن فرض سياسة معيّنة لـ HDCP أم لا.
- سنبدأ بمراحل التجربة والتقييم في ما يتعلّق بكل من وضع "نافذة ضمن النافذة" تلقائيًا في تطبيقات الويب التقدّمية (PWA) على أجهزة الكمبيوتر المكتبي و"تخطّي الإعلان" في ميزة "نافذة ضمن النافذة".
- يتم منح تطبيقات الويب التقدّمية (PWA) لأجهزة الكمبيوتر المكتبي التشغيل التلقائي مع الصوت.
إتاحة مفاتيح وسائط الأجهزة
تتضمن العديد من لوحات المفاتيح حاليًا مفاتيح للتحكم في وظائف تشغيل الوسائط الأساسية مثل التشغيل/الإيقاف المؤقت والمسار السابق والتالي. تتوفّر هذه الميزات أيضًا في سماعات الرأس. حتى الآن، لم يكن بإمكان مستخدمي أجهزة الكمبيوتر المكتبي استخدام مفاتيح الوسائط هذه للتحكّم في تشغيل الصوت والفيديو في Chrome. ستتغير هذه التغييرات اليوم.
![مفاتيح وسائط لوحة المفاتيح](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/keyboard-media-keys-b9e8bca41e6ac.jpeg?authuser=6&hl=ar)
إذا ضغط المستخدم على مفتاح الإيقاف المؤقت، سيتم إيقاف عنصر الوسائط النشط الذي يتم تشغيله في Chrome مؤقتًا وسيتلقى حدث وسائط "متوقف مؤقتًا". عند الضغط على مفتاح التشغيل، سيتم استئناف عنصر الوسائط الذي كان متوقفًا مؤقتًا سابقًا وسيظهر حدث "تشغيل" للوسائط. وتعمل هذه الميزة سواء كان Chrome يعمل في المقدّمة أو في الخلفية.
في ChromeOS، ستطلب الآن تطبيقات Android التي تستخدم التركيز على الصوت من Chrome إيقاف الصوت مؤقتًا واستئنافه لإنشاء تجربة وسائط سلسة بين المواقع الإلكترونية على Chrome وتطبيقات Chrome وتطبيقات Android. لا يتوفّر هذا الإعداد حاليًا إلا على جهاز ChromeOS الذي يعمل بنظام Android P.
باختصار، من المفيد دائمًا الاستماع إلى هذه الأحداث الإعلامية والتصرّف وفقًا لذلك.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
انتظر، فهناك المزيد. من خلال Media Session API الآن على أجهزة الكمبيوتر المكتبي (كانت متوفرة من قبل على الأجهزة الجوّالة فقط)، يمكن لمطوّري الويب معالجة الأحداث ذات الصلة بالوسائط مثل تغيير المقطع الصوتي التي تؤدي إلى تشغيل مفاتيح الوسائط. تتوفّر
الحدثان previoustrack
وnexttrack
حاليًا.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
يتعامل Chrome تلقائيًا مع مفاتيح التشغيل والإيقاف المؤقت. ومع ذلك، إذا لم يناسبك السلوك الافتراضي، فما زال بإمكانك تعيين بعض معالجات الإجراءات لـ "تشغيل" و"إيقاف مؤقت" لمنع ذلك.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
تتوفّر إمكانية استخدام مفاتيح وسائط الأجهزة على أنظمة التشغيل ChromeOS وmacOS وWindows. سيأتي نظام Linux في وقت لاحق.
يمكنك الاطّلاع على مستندات المطوّرين الحالية وتجربة نماذج جلسات الوسائط الرسمية.
Chromestatus Tracker | خطأ Chromium
الوسائط المشفّرة: التحقُّق من سياسة HDCP
بفضل HDCP Policy Check API، أصبح بإمكان مطوّري البرامج على الويب الاستعلام عمّا إذا كان يمكن فرض سياسة معيّنة، مثل متطلبات HDCP، قبل طلب تراخيص Widevine وتحميل الوسائط.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
تتوفّر واجهة برمجة التطبيقات على جميع الأنظمة الأساسية. ومع ذلك، قد لا تكون عمليات التحقّق الفعلية من السياسات متاحة على بعض المنصات. على سبيل المثال، سيتم رفض وعد التحقّق من الالتزام بسياسة HDCP
مع NotSupportedError
على نظامَي Android وAndroid WebView.
يمكنك مراجعة مستندات المطوّرين السابقة وتجربة النموذج الرسمي للاطّلاع على جميع إصدارات HDCP المتوافقة.
هدف الشحن | أداة تتبّع حالة Chrome | خطأ Chromium
مرحلة التجربة الأصلية لاستخدام ميزة "نافذة ضمن النافذة" تلقائيًا لتطبيقات الويب التقدّمية (PWA) المثبَّتة
قد تحتاج بعض الصفحات إلى الدخول في وضع نافذة ضمن النافذة والخروج منه تلقائيًا ضمن أحد عناصر الفيديو. على سبيل المثال، قد تستفيد تطبيقات الويب لعقد اجتماعات الفيديو من بعض السلوك التلقائي لميزة "نافذة ضمن النافذة" عندما يتنقل المستخدم ذهابًا وإيابًا بين تطبيق الويب والتطبيقات أو علامات التبويب الأخرى. للأسف، لا يمكن إجراء ذلك مع متطلبات إيماءة المستخدم. وهنا يأتي دور ميزة "نافذة ضمن النافذة" تلقائيًا!
لإتاحة عمليتَي التبديل بين علامات التبويب والتطبيقات، تمت إضافة سمة autopictureinpicture
جديدة إلى العنصر <video>
.
<video autopictureinpicture></video>
إليك كيفية عملها تقريبًا:
- عندما يتم إخفاء المستند، يدخل عنصر الفيديو الذي تم ضبط السمة
autopictureinpicture
فيه مؤخرًا إلى نافذة ضمن النافذة تلقائيًا، إذا تم السماح بذلك. - عندما يصبح المستند مرئيًا، يغادره عنصر الفيديو في نافذة ضمن النافذة تلقائيًا.
وهكذا انتهى كل شيء! يُرجى العلم أنّ ميزة "نافذة ضمن النافذة" التلقائية لا تنطبق إلا على تطبيقات الويب التقدّمية التي ثبّتها المستخدمون على أجهزة الكمبيوتر المكتبي.
يمكنك الاطّلاع على spec لمزيد من التفاصيل وتجربة استخدام نموذج PWA الرسمي.
هدف إلى إجراء تجربة | Chromestatus Tracker | خطأ Chromium
مرحلة التجربة والتقييم لتخطّي الإعلان في نافذة ميزة "نافذة ضمن النافذة"
عادةً ما يتألف نموذج إعلانات الفيديو من إعلانات ما قبل التشغيل. في أغلب الأحيان، يتيح موفرو المحتوى إمكانية تخطي الإعلان بعد بضع ثوانٍ. للأسف، بما أنّ نافذة ميزة "نافذة ضمن النافذة" غير تفاعلية، لا يمكن للمستخدمين الذين يشاهدون فيديو في وضع "نافذة ضمن النافذة" إجراء ذلك اليوم.
في ظل توفّر Media Session API الآن على أجهزة الكمبيوتر المكتبي (كانت متوافقة مع الأجهزة الجوّالة فقط من قبل)، يمكن استخدام إجراء جلسة وسائط skipad
جديد لتوفير هذا الخيار في نافذة ضمن النافذة.
![زر "تخطّي الإعلان" في نافذة ميزة "نافذة ضمن النافذة"](https://developer.chrome.com/static/blog/media-updates-in-chrome-73/image/skip-ad-button-picture-095637cf16a4b.png?authuser=6&hl=ar)
لتوفير هذه الميزة، عليك تمرير دالة من خلال skipad
عند استدعاء setActionHandler()
. لإخفائها، يجب تمرير null
. كما يمكنك قراءة أدناه،
إن الأمر واضح ومباشر.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
يمكنك تجربة النموذج الرسمي "تخطّي الإعلان" وإعلامنا بكيفية تحسين هذه الميزة.
هدف إلى إجراء تجربة | Chromestatus Tracker | خطأ Chromium
منح التشغيل التلقائي لتطبيقات الويب التقدّمية (PWA) على أجهزة الكمبيوتر المكتبي
الآن وبعد أن أصبحت تطبيقات الويب التقدّمية متوفرة على جميع الأنظمة الأساسية لأجهزة الكمبيوتر المكتبي، نعمل على توسيع القاعدة التي استخدمناها على الأجهزة الجوّالة إلى أجهزة الكمبيوتر المكتبي وهي: يُسمح الآن باستخدام التشغيل التلقائي مع الصوت لتطبيقات الويب التقدّمية المثبّتة. يُرجى العِلم أنّه لا ينطبق إلا على الصفحات المدرَجة في نطاق بيان تطبيق الويب.