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

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

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

  • پیش بینی اینکه آیا پخش برای رسانه های رمزگذاری شده روان و کارآمد خواهد بود یا خیر.
  • پشتیبانی از اشاره ویژگی playsInline عنصر ویدیو.

رسانه رمزگذاری شده: اطلاعات رمزگشایی

از Chrome 66، توسعه‌دهندگان وب می‌توانند از اطلاعات رمزگشایی برای پرس و جو از مرورگر در مورد توانایی‌های رمزگشایی محتوای واضح دستگاه بر اساس اطلاعاتی مانند کدک‌ها، نمایه، وضوح، نرخ بیت و غیره استفاده کنند. این نشان می‌دهد که آیا بازپخش روان خواهد بود یا خیر. (به موقع) و مصرف انرژی بر اساس آمار پخش قبلی ثبت شده توسط مرورگر.

مشخصات API قابلیت‌های رسانه ، که اطلاعات رمزگشایی را تعریف می‌کند، از آن زمان به‌روزرسانی شده است تا پیکربندی‌های رسانه رمزگذاری‌شده را نیز مدیریت کند تا وب‌سایت‌هایی که از رسانه رمزگذاری‌شده (EME) استفاده می‌کنند، بتوانند جریان‌های رسانه بهینه را انتخاب کنند.

به طور خلاصه، در اینجا نحوه عملکرد رمزگشایی اطلاعات برای EME آمده است. نمونه رسمی را امتحان کنید.

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

پخش‌های EME دارای مسیرهای کد رمزگشایی و رندر تخصصی هستند، به این معنی که پشتیبانی و عملکرد کدک‌های متفاوت در مقایسه با پخش‌های واضح وجود دارد. از این رو یک کلید جدید keySystemConfiguration باید در شیء پیکربندی رسانه که به navigator.mediaCapabilities.decodingInfo() ارسال شده است، تنظیم شود. مقدار این کلید دیکشنری است که تعدادی از انواع شناخته شده EME را در خود جای داده است. این ورودی‌های ارائه‌شده به requestMediaKeySystemAccess() EME را با یک تفاوت عمده تکرار می‌کند: دنباله‌های ورودی‌های ارائه‌شده برای requestMediaKeySystemAccess() به یک مقدار مسطح می‌شوند هر جا که هدف دنباله این بود که requestMediaKeySystemAccess() زیرمجموعه‌ای را انتخاب کند.

Decoding Info کیفیت (صافی و کارایی انرژی) پشتیبانی از یک جفت جریان صوتی و تصویری را بدون تصمیم گیری برای تماس گیرنده توصیف می کند. تماس‌گیرندگان همچنان باید پیکربندی‌های رسانه را سفارش دهند، همانطور که با requestMediaKeySystemAccess() انجام می‌دهند. فقط در حال حاضر آنها خود را در لیست قدم می زنند.

navigator.mediaCapabilities.decodingInfo() وعده ای را برمی گرداند که به طور ناهمزمان با یک شی حاوی سه بولی حل می شود: supported ، smooth و powerEfficient . با این حال، هنگامی که یک کلید keySystemConfiguration تنظیم و supported می‌شود، true است، یک شی MediaKeySystemAccess دیگر به نام keySystemAccess نیز برگردانده می‌شود. می توان از آن برای درخواست برخی کلیدهای رسانه و تنظیم پخش رسانه رمزگذاری شده استفاده کرد. در اینجا یک مثال است:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

توجه داشته باشید که رمزگشایی اطلاعات رسانه های رمزگذاری شده به HTTPS نیاز دارد.

علاوه بر این، توجه داشته باشید که ممکن است درخواست کاربر در Android و ChromeOS را به همان روشی که requestMediaKeySystemAccess() فعال کند. با وجود اینکه به تماس‌های بیشتری برای تنظیم پخش رسانه رمزگذاری‌شده نیاز دارد، درخواست‌های بیشتری نسبت به requestMediaKeySystemAccess() نشان نمی‌دهد.

ALT_TEXT_HERE
درخواست محتوای محافظت شده

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

HTMLVideoElement.playsInline

کروم اکنون از ویژگی بولی playsInline پشتیبانی می کند. اگر وجود داشته باشد، به مرورگر اشاره می‌کند که ویدیو باید به‌طور پیش‌فرض به صورت «داخلی» در سند نمایش داده شود و محدود به ناحیه پخش عنصر باشد.

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

<video playsinline></video>

از آنجایی که Chrome در Android و Desktop تمام صفحه خودکار را اجرا نمی‌کند، نکته ویژگی عنصر video playsInline استفاده نمی‌شود.

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