การอัปเดตสื่อใน 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 โดยมีความแตกต่างสำคัญ 1 ประการ คือระบบจะแยกลำดับอินพุตให้กับ requestMediaKeySystemAccess() เป็นค่าเดียวที่มีเจตนาให้ requestMediaKeySystemAccess() เลือกชุดย่อยที่รองรับ

การถอดรหัสข้อมูลจะอธิบายคุณภาพ (ความลื่นไหลและประหยัดพลังงาน) ของการรองรับสตรีมเสียงและวิดีโอ 1 คู่โดยไม่ต้องตัดสินใจให้ผู้โทร ผู้โทรควรจะยังคงเรียงลำดับการกำหนดค่าสื่อเช่นเดียวกับที่ทำกับ 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() ถึงแม้ว่าจะต้องเรียกใช้จำนวนมากขึ้นเพื่อตั้งค่าการเล่นสื่อที่เข้ารหัส

ข้อความแจ้งเกี่ยวกับเนื้อหาที่ได้รับการคุ้มครอง

หมายเหตุ: ในการรับความคิดเห็นจากนักพัฒนาเว็บ ฟีเจอร์นี้พร้อมใช้งานเป็น [ช่วงทดลองใช้จากต้นทาง] ใน Chrome 75 คุณจะต้อง [ขอโทเค็น] เพื่อให้ระบบเปิดใช้ฟีเจอร์นี้ในต้นทางโดยอัตโนมัติในระยะเวลาที่จำกัด

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

HTMLVideoElement.playsInline

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

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

<video playsinline></video>

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

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