به روز رسانی رسانه در کروم 73

فرانسوا بوفور
François Beaufort
GitHub

در این مقاله، در مورد ویژگی‌های رسانه جدید Chrome 73 بحث خواهم کرد که عبارتند از:

پشتیبانی از کلیدهای رسانه ای سخت افزاری

امروزه بسیاری از کیبوردها دارای کلیدهایی برای کنترل عملکردهای اصلی پخش رسانه مانند پخش/مکث، آهنگ قبلی و بعدی هستند. هدست ها هم اینها را دارند. تا به حال، کاربران دسکتاپ نمی توانستند از این کلیدهای رسانه ای برای کنترل پخش صدا و ویدئو در کروم استفاده کنند. این امروز تغییر می کند!

کلیدهای رسانه صفحه کلید
کلیدهای رسانه صفحه کلید

اگر کاربر کلید مکث را فشار دهد، عنصر رسانه فعال در حال پخش در Chrome متوقف می شود و یک رویداد رسانه ای "مکث" دریافت می کند. اگر کلید پخش فشار داده شود، عنصر رسانه ای که قبلاً متوقف شده بود از سر گرفته می شود و یک رویداد رسانه ای "پخش" دریافت می کند. چه کروم در پیش‌زمینه یا پس‌زمینه باشد، کار می‌کند.

در ChromeOS، برنامه‌های Android با استفاده از فوکوس صوتی، اکنون به Chrome می‌گویند که صدا را موقتاً متوقف کرده و از سر بگیرد تا یک تجربه رسانه‌ای یکپارچه بین وب‌سایت‌ها در Chrome، Chrome Apps و Android Apps ایجاد کند. این در حال حاضر فقط در دستگاه 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 در دسترس است. لینوکس بعدا میاد

اسناد توسعه‌دهنده موجود ما را بررسی کنید و نمونه‌های رسمی جلسه رسانه را امتحان کنید.

ردیاب Chromestatus | اشکال کروم

رسانه رمزگذاری شده: بررسی سیاست HDCP

به لطف HDCP Policy Check API ، توسعه‌دهندگان وب اکنون می‌توانند قبل از درخواست مجوزهای Widevine و بارگیری رسانه، پرس و جو کنند که آیا یک خط‌مشی خاص، به عنوان مثال الزامات HDCP ، قابل اجرا است یا خیر.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

API در همه پلتفرم ها در دسترس است. با این حال، بررسی های سیاست واقعی ممکن است در پلتفرم های خاصی در دسترس نباشد. به عنوان مثال، وعده بررسی خط مشی HDCP با NotSupportedError در Android و Android WebView رد می شود.

اسناد توسعه‌دهنده قبلی ما را بررسی کنید و نمونه رسمی را امتحان کنید تا همه نسخه‌های HDCP پشتیبانی شده را ببینید.

قصد حمل | ردیاب Chromestatus | اشکال کروم

Origin Trial برای Auto Picture-in-Picture برای PWA های نصب شده

برخی از صفحات ممکن است بخواهند به طور خودکار Picture-in-Picture را برای یک عنصر ویدئویی وارد کرده و از آن خارج شوند. به عنوان مثال، برنامه‌های وب کنفرانس ویدیویی از برخی رفتارهای خودکار تصویر در تصویر زمانی که کاربر بین برنامه وب و سایر برنامه‌ها یا برگه‌ها به جلو و عقب جابه‌جا می‌شود، سود می‌برند. این متأسفانه با نیاز ژست کاربر امکان پذیر نیست. بنابراین تصویر در تصویر خودکار آمده است!

برای پشتیبانی از این تغییر برگه و برنامه، یک ویژگی autopictureinpicture جدید به عنصر <video> اضافه می‌شود.

<video autopictureinpicture></video>

در اینجا تقریباً نحوه عملکرد آن آمده است:

  • وقتی سند مخفی می شود، عنصر ویدیویی که ویژگی autopictureinpicture آن اخیراً تنظیم شده است، در صورت مجاز بودن، به طور خودکار وارد Picture-in-Picture می شود.
  • وقتی سند قابل مشاهده می شود، عنصر ویدیو در تصویر در تصویر به طور خودکار آن را ترک می کند.

و بس! توجه داشته باشید که ویژگی Auto Picture-in-Picture فقط برای برنامه های وب پیشرو که کاربران روی دسکتاپ نصب کرده اند اعمال می شود.

برای جزئیات بیشتر مشخصات را بررسی کنید و با استفاده از نمونه رسمی PWA امتحان کنید.

قصد آزمایش | ردیاب Chromestatus | اشکال کروم

نسخه آزمایشی اولیه برای رد شدن از آگهی در پنجره تصویر در تصویر

مدل تبلیغات ویدیویی معمولاً از تبلیغات پیش رول تشکیل شده است. ارائه دهندگان محتوا اغلب امکان رد شدن از تبلیغات را پس از چند ثانیه فراهم می کنند. متأسفانه، از آنجایی که پنجره تصویر در تصویر تعاملی نیست، کاربرانی که ویدیویی را در تصویر در تصویر تماشا می کنند، امروز نمی توانند این کار را انجام دهند.

با توجه به اینکه Media Session API اکنون روی دسک‌تاپ در دسترس است (قبل از آن فقط در تلفن همراه پشتیبانی می‌شد)، ممکن است از یک عملکرد جلسه رسانه skipad جدید برای ارائه این گزینه در Picture-in-Picture استفاده شود.

دکمه Skip Ad در پنجره Picture-in-Picture
دکمه "پرش از تبلیغات" در پنجره تصویر در تصویر

برای ارائه این ویژگی هنگام فراخوانی setActionHandler() یک تابع را با skipad ارسال کنید. برای مخفی کردن آن، 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 | اشکال کروم

پخش خودکار برای PWA های دسکتاپ اعطا شد

اکنون که برنامه‌های وب پیشرو در همه پلتفرم‌های دسکتاپ در دسترس هستند، قوانینی را که در تلفن همراه داشتیم به دسکتاپ تعمیم می‌دهیم: پخش خودکار با صدا اکنون برای PWA‌های نصب‌شده مجاز است. توجه داشته باشید که فقط برای صفحاتی در محدوده مانیفست برنامه وب اعمال می شود.

اشکال کروم