تعديلات الوسائط في الإصدار 73 من Chrome

François Beaufort

في هذه المقالة، سأناقش ميزات الوسائط الجديدة في الإصدار 73 من Chrome، والتي تشمل ما يلي:

• تتوفّر الآن مفاتيح الوسائط في الأجهزة للتحكّم في تشغيل الوسائط على أجهزة الكمبيوتر المكتبي.
• يمكن لمطوّري الويب الاستعلام عمّا إذا كان يمكن فرض سياسة HDCP معيّنة.
• ستتوفّر ميزتا فتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا في التطبيقات المتوافقة مع الأجهزة المكتبية و"تخطّي الإعلان" في وضع "نافذة ضمن النافذة" في إصدارات الإصدارات التجريبية من التطبيقات.
• يتم منح تطبيقات الويب التقدّمية المتوافقة مع أجهزة الكمبيوتر المكتبي ميزة التشغيل التلقائي بالصوت.

توافق مفاتيح الوسائط في الأجهزة

تتضمن العديد من لوحات المفاتيح في الوقت الحاضر مفاتيح للتحكم في وظائف تشغيل الوسائط الأساسية مثل التشغيل/الإيقاف المؤقت، والمسار السابق والتالي. تتوفّر هذه الميزة أيضًا في سماعات الرأس. حتى الآن، لم يكن بإمكان مستخدمي أجهزة الكمبيوتر المكتبي استخدام مفاتيح الوسائط هذه للتحكّم في تشغيل الصوت والفيديو في Chrome. سنغيّر ذلك اليوم.

إذا ضغط المستخدم على مفتاح الإيقاف المؤقت، فإن عنصر الوسائط النشط الذي يتم تشغيله في 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 لاحقًا.

يمكنك الاطّلاع على مستندات المطوّرين الحالية وتجربة نماذج جلسات Media Session الرسمية.

Chromestatus Tracker | Chromium Bug

الوسائط المشفّرة: التحقّق من سياسة 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.');

تتوفّر واجهة برمجة التطبيقات على جميع المنصات. ومع ذلك، قد لا تتوفّر عمليات التحقّق الفعلية من الالتزام بالسياسة على أنظمة أساسية معيّنة. على سبيل المثال، سيتم رفض NotSupportedError على Android وAndroid WebView في حال عدم استيفاء وعد التحقّق من سياسة HDCP.

يمكنك الاطّلاع على مستندات المطوّرين السابقة وتجربة النموذج الرسمي للاطّلاع على جميع إصدارات HDCP المتوافقة.

Intent to Ship | Chromestatus Tracker | Chromium Bug

إصدار أوّلي لميزة "فتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا لتطبيقات الويب التقدّمية المثبَّتة

قد تحتاج بعض الصفحات إلى إدخال ومغادرة نافذة ضمن النافذة تلقائيًا لعنصر فيديو. على سبيل المثال، ستستفيد تطبيقات الويب لمؤتمرات الفيديو من بعض سلوك ميزة "نافذة ضمن النافذة" عندما يبدِّل المستخدم ذهابًا وإيابًا بين تطبيق الويب والتطبيقات أو علامات التبويب الأخرى. للأسف، يتعذّر حدوث ذلك مع متطلبات إيماءة المستخدم. لذلك، نقدّم لك ميزة "فتح النوافذ في وضع "نافذة ضمن النافذة" تلقائيًا".

لتمكين إمكانية التبديل بين علامات التبويب والتطبيقات، تتم إضافة سمة autopictureinpicture جديدة إلى عنصر <video>.

<video autopictureinpicture></video>

إليك طريقة عملها:

• عند إخفاء المستند، يتم تلقائيًا دخول عنصر الفيديو الذي تم ضبط السمة autopictureinpicture فيه "نافذة ضمن النافذة" ضمن "نافذة ضمن النافذة"، إذا تم السماح بذلك.
• عندما يصبح المستند مرئيًا، يغادر عنصر الفيديو في وضع "صورة في صورة" تلقائيًا.

هذا كل ما في الأمر! تجدر الإشارة إلى أنّ ميزة "وضع الصورة في الصورة" التلقائي لا تنطبق إلا على تطبيقات الويب التقدّمية التي ثبَّتها المستخدمون على أجهزة الكمبيوتر المكتبي.

يمكنك الاطّلاع على المواصفات لمزيد من التفاصيل وتجربة استخدام نموذج تطبيق الويب التقدّمي (PWA) الرسمي.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

تجربة الإصدار الأول لميزة "تخطّي الإعلان" في نافذة "نافذة ضمن النافذة"

يتألف نموذج إعلانات الفيديو عادةً من إعلانات ما قبل التشغيل. وغالبًا ما يتيح مزوّدو المحتوى إمكانية تخطّي الإعلان بعد بضع ثوانٍ. للأسف، يتعذّر على المستخدمين الذين يشاهدون فيديو في وضع "نافذة ضمن النافذة" تنفيذ ذلك في الوقت الحالي لأنّ نافذة "نافذة ضمن النافذة" غير تفاعلية.

مع توفّر Media Session API الآن على أجهزة الكمبيوتر المكتبي (كانت متاحة في السابق على الأجهزة الجوّالة فقط)، يمكن استخدام إجراء جلسة وسائط جديد skipad لتقديم هذا الخيار في ميزة صورة في صورة.

لتقديم هذه الميزة، مرِّر دالة مع 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 | خطأ Chromium

تم منح التشغيل التلقائي لتطبيقات الويب التقدّمية (PWA) على أجهزة الكمبيوتر المكتبي

بما أنّ تطبيقات الويب التقدّمية متاحة الآن على جميع منصات أجهزة الكمبيوتر المكتبي، سنطبّق القاعدة التي كانت سارية على الأجهزة الجوّالة على أجهزة الكمبيوتر المكتبي: أصبح الآن مسموحًا بالتشغيل التلقائي مع الصوت لتطبيقات الويب التقدّمية المثبّتة. يُرجى العلم أنّه لا ينطبق إلا على الصفحات في نطاق بيان تطبيق الويب.

خطأ Chromium