การอัปเดตสื่อใน Chrome 75

François Beaufort

ความสามารถด้านสื่อของ Chrome ได้รับการอัปเดตในเวอร์ชัน 75 ในบทความนี้ เราจะพูดถึงฟีเจอร์ใหม่เหล่านั้น ซึ่งได้แก่

• คาดการณ์ว่าการเล่นสื่อที่เข้ารหัสจะราบรื่นและประหยัดพลังงานหรือไม่
• การรองรับคำแนะนำแอตทริบิวต์ playsInline ขององค์ประกอบวิดีโอ

สื่อที่เข้ารหัส: การถอดรหัสข้อมูล

ตั้งแต่ Chrome เวอร์ชัน 66 เป็นต้นไป นักพัฒนาเว็บสามารถใช้ข้อมูลการถอดรหัสเพื่อสอบถามเบราว์เซอร์เกี่ยวกับความสามารถในการถอดรหัสเนื้อหาที่ชัดเจนของอุปกรณ์ โดยอิงตามข้อมูล เช่น ตัวแปลงรหัส โปรไฟล์ ความละเอียด อัตราบิต ฯลฯ ซึ่งจะบ่งบอกว่าการเล่นจะราบรื่น (ทันเวลา) และประหยัดพลังงานหรือไม่ โดยอิงตามสถิติการเล่นก่อนหน้านี้ที่เบราว์เซอร์บันทึกไว้

ข้อมูลจำเพาะของ Media Capabilities 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() เลือกชุดย่อยที่รองรับ

ข้อมูลการถอดรหัสจะอธิบายคุณภาพ (ความราบรื่นและประสิทธิภาพการใช้พลังงาน) ของการสนับสนุนสตรีมเสียงและวิดีโอคู่เดียวโดยไม่ตัดสินใจแทนผู้เรียก ผู้โทรควรสั่งซื้อการกำหนดค่าสื่อตามปกติเช่นเดียวกับที่ใช้กับ requestMediaKeySystemAccess() แต่ตอนนี้พวกเขาเดินตามรายการด้วยตนเอง

navigator.mediaCapabilities.decodingInfo() จะแสดงผลพรอมิสที่แก้ไขแบบแอซิงโครนัสด้วยออบเจ็กต์ที่มีบูลีน 3 รายการ ได้แก่ 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() แม้ว่าจะต้องมีการเรียกใช้เพิ่มเติมเพื่อตั้งค่าการเล่นสื่อที่เข้ารหัส

ความตั้งใจในการทดสอบ | Chromestatus เครื่องมือติดตาม | ข้อบกพร่องของ Chromium

HTMLVideoElement.playsInline

ตอนนี้ Chrome รองรับแอตทริบิวต์บูลีน playsInline แล้ว หากมี แท็กนี้จะบอกให้เบราว์เซอร์ทราบว่าวิดีโอควรแสดง "ในบรรทัด" ในเอกสารโดยค่าเริ่มต้น โดยถูกจำกัดให้แสดงในพื้นที่การเล่นขององค์ประกอบ

คล้ายกับ Safari ที่องค์ประกอบวิดีโอใน iPhone จะไม่เข้าสู่โหมดเต็มหน้าจอโดยอัตโนมัติเมื่อเริ่มเล่น คำแนะนำนี้ช่วยให้ผู้ฝังบางรายได้รับประสบการณ์การเล่นวิดีโอแบบเต็มหน้าจอโดยอัตโนมัติ นักพัฒนาเว็บสามารถใช้เพื่อเลือกไม่ใช้ประสบการณ์นี้หากต้องการ

<video playsinline></video>

เนื่องจาก Chrome ใน Android และเดสก์ท็อปไม่ได้ใช้โหมดเต็มหน้าจออัตโนมัติ ระบบจะไม่ใช้คำแนะนำแอตทริบิวต์playsInlineองค์ประกอบวิดีโอ

Intent to Ship | เครื่องมือติดตามสถานะ Chrome | ข้อบกพร่องของ Chromium