การอัปเดตสื่อใน Chrome 63/64

François Beaufort
François Beaufort
GitHub

ความสามารถของสื่อ - API ข้อมูลการถอดรหัส

ปัจจุบันนักพัฒนาเว็บใช้ isTypeSupported() หรือ canPlayType() เพื่อดูคร่าวๆ ว่าถอดรหัสสื่อบางอย่างได้หรือไม่ แต่คำถามที่แท้จริงควรเป็น "แอปจะทำงานได้ดีเพียงใดบนอุปกรณ์นี้"

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

โดยสรุป วิธีการทำงานของ Decoding Info API ในตอนนี้มีดังนี้ ดูตัวอย่างอย่างเป็นทางการ

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  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
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

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

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

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

พร้อมใช้งานสำหรับช่วงทดลองใช้จากต้นทาง

เราได้เพิ่มฟีเจอร์นี้ใน Chrome 64 เป็นช่วงทดลองใช้จากต้นทางก่อนหน้านี้ เพื่อรับความคิดเห็นจากนักพัฒนาแอปที่ใช้ Decoding Info API (ส่วนหนึ่งของความสามารถของสื่อ) ในภาคสนามให้ได้มากที่สุด

การทดลองใช้สิ้นสุดลงเรียบร้อยแล้วในเดือนเมษายน 2018

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

การเล่นวิดีโอ HDR บน Windows 10

วิดีโอ High Dynamic Range (HDR) มีคอนทราสต์สูงกว่า ทำให้เห็นเงาที่แม่นยำและ ละเอียด รวมถึงไฮไลต์ที่น่าทึ่งด้วยความคมชัดมากกว่าที่เคย นอกจากนี้ การรองรับช่วงสีที่กว้างยังหมายความว่าสีจะสดใสยิ่งขึ้นด้วย

การเปรียบเทียบ SDR กับ HDR ที่จำลอง (การดู HDR จริงต้องใช้จอแสดงผล HDR)
การเปรียบเทียบ SDR กับ HDR จำลอง (การดู HDR จริงต้องใช้จอแสดงผล HDR)

เนื่องจากตอนนี้ Chrome สำหรับ Windows 10 Fall Creator Update รองรับการเล่น VP9 โปรไฟล์ 2 แบบ 10 บิตแล้ว Chrome จึงรองรับการเล่นวิดีโอ HDR เพิ่มเติมเมื่อ Windows 10 อยู่ในโหมด HDR ในส่วนของเทคนิค ตอนนี้ Chrome 64 รองรับโปรไฟล์สี scRGB ซึ่งจะช่วยให้เล่นสื่อใน HDR ได้

คุณลองใช้ฟีเจอร์นี้ได้โดยการดูโลกใน HDR ในระดับ 4K (ULTRA HD) บน YouTube และตรวจสอบว่าวิดีโอเล่นในรูปแบบ HDR โดยดูที่การตั้งค่าคุณภาพของเพลเยอร์ YouTube

การตั้งค่าคุณภาพของวิดีโอเพลเยอร์ YouTube ที่มี HDR
การตั้งค่าคุณภาพของเพลเยอร์ YouTube ที่มี HDR

สิ่งที่คุณต้องมีในตอนนี้คือ Windows 10 Fall Creator Update, กราฟิกการ์ดและจอแสดงผลที่รองรับ HDR (เช่น การ์ด NVIDIA 10-series, ทีวีหรือจอภาพ LG HDR) และเปิดโหมด HDR ในการตั้งค่าการแสดงผลของ Windows

นักพัฒนาเว็บสามารถตรวจหาขอบเขตสีโดยประมาณที่อุปกรณ์เอาต์พุตรองรับได้ด้วยการค้นหาสื่อ color-gamut ล่าสุด และจำนวนบิตที่ใช้เพื่อแสดงสีบนหน้าจอด้วย screen.colorDepth ต่อไปนี้คือวิธีหนึ่งในการใช้ ข้อมูลดังกล่าวเพื่อตรวจหาว่ารองรับ VP9 HDR หรือไม่

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

สตริงตัวแปลงรหัส VP9 ที่มีโปรไฟล์ 2 ซึ่งส่งไปยัง isTypeSupported() ใน ตัวอย่างด้านบนต้องได้รับการอัปเดตตามพร็อพเพอร์ตี้การเข้ารหัสวิดีโอของคุณ

โปรดทราบว่าขณะนี้ยังไม่สามารถกำหนดสี HDR ใน CSS, Canvas รูปภาพ และเนื้อหาที่ป้องกัน ทีม Chrome กำลังดำเนินการแก้ไข โปรดอดใจรอ

ใบอนุญาตแบบถาวรสำหรับ Windows และ Mac

ใบอนุญาตถาวรใน Encrypted Media Extensions (EME) หมายความว่าสามารถ จัดเก็บใบอนุญาตไว้ในอุปกรณ์เพื่อให้แอปพลิเคชันโหลดใบอนุญาตลงใน หน่วยความจำได้โดยไม่ต้องส่งคำขอใบอนุญาตอื่นไปยังเซิร์ฟเวอร์ นี่คือวิธีที่ EME รองรับการเล่นแบบออฟไลน์

จนถึงตอนนี้ ChromeOS และ Android เป็นแพลตฟอร์มเดียวที่รองรับใบอนุญาตแบบถาวร แต่ตอนนี้ไม่เป็นเช่นนั้นแล้ว ตอนนี้คุณสามารถเล่นเนื้อหาที่มีการคุ้มครองผ่าน EME ขณะที่อุปกรณ์ออฟไลน์ใน Chrome 64 บน Windows และ Mac ได้แล้ว

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

คุณลองใช้ใบอนุญาตแบบถาวรด้วยตนเองได้โดยดู PWA สื่อตัวอย่าง และทำตามขั้นตอนต่อไปนี้

  1. ไปที่ https://biograf-155113.appspot.com/ttt/episode-2/
  2. คลิก "ทำให้ใช้งานแบบออฟไลน์ได้" แล้วรอให้ระบบดาวน์โหลดวิดีโอ
  3. ปิดการเชื่อมต่ออินเทอร์เน็ต
  4. คลิกปุ่ม "เล่น" แล้วเพลิดเพลินกับวิดีโอ

การโหลดล่วงหน้าของสื่อจะตั้งค่าเริ่มต้นเป็น "ข้อมูลเมตา"

ตอนนี้ Chrome บนเดสก์ท็อปได้ตั้งค่าเริ่มต้นของการโหลดล่วงหน้าสำหรับองค์ประกอบ <video> และ <audio> เป็น "metadata" เพื่อลดการใช้แบนด์วิดท์และทรัพยากร ซึ่งสอดคล้องกับการใช้งานของเบราว์เซอร์อื่นๆ ตั้งแต่ Chrome 64 เป็นต้นไป ลักษณะการทำงานใหม่นี้จะมีผลเฉพาะในกรณีที่ไม่ได้ตั้งค่าการโหลดล่วงหน้า โปรดทราบว่าระบบจะทิ้งคำแนะนำของแอตทริบิวต์การโหลดล่วงหน้า เมื่อมีการแนบ MediaSource กับองค์ประกอบสื่อ เนื่องจาก เว็บไซต์จัดการการโหลดล่วงหน้าของตัวเอง

กล่าวคือ ตอนนี้ <video> มีค่า "metadata" ส่วน <video preload="auto"> ยังคงมีค่า "auto" ลองใช้ตัวอย่างอย่างเป็นทางการ

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

playbackRate ที่ไม่รองรับจะทำให้เกิดข้อยกเว้น

หลังจากการเปลี่ยนแปลงข้อกำหนด HTML เมื่อตั้งค่า playbackRate ขององค์ประกอบสื่อ เป็นค่าที่ Chrome ไม่รองรับ (เช่น ค่าลบ) ระบบจะแสดง "NotSupportedError" DOMException ใน Chrome 63

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

อย่างไรก็ตาม การใช้งานปัจจุบันของ Chrome จะทำให้เกิดข้อยกเว้นนี้เมื่อ playbackRate เป็นค่าลบ น้อยกว่า 0.0625 หรือมากกว่า 16 ลองใช้ตัวอย่างอย่างเป็นทางการ เพื่อดูการทำงานจริง

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

การเพิ่มประสิทธิภาพแทร็กวิดีโอพื้นหลัง

ทีม Chrome พยายามหาวิธีใหม่ๆ ในการปรับปรุงอายุการใช้งานแบตเตอรี่อยู่เสมอ และ Chrome 63 ก็เช่นกัน

หากวิดีโอไม่มีแทร็กเสียง ระบบจะหยุดวิดีโอชั่วคราวโดยอัตโนมัติ เมื่อเล่นในเบื้องหลัง (เช่น ในแท็บที่มองไม่เห็น) ใน Chrome บนเดสก์ท็อป (Windows, Mac, Linux และ ChromeOS) การเปลี่ยนแปลงนี้เป็นการต่อยอดจากการเปลี่ยนแปลงที่คล้ายกันซึ่งมีผลกับวิดีโอ MSE ใน Chrome 62 เท่านั้น

ข้อบกพร่องของ Chromium

ยกเลิกการปิดเสียงสำหรับอัตราการเล่นที่เร็วมาก

ก่อน Chrome 64 ระบบจะปิดเสียงเมื่อ playbackRate ต่ำกว่า 0.5 หรือสูงกว่า 4 เนื่องจากคุณภาพลดลงอย่างมาก เนื่องจาก Chrome เปลี่ยนไปใช้ วิธีการซ้อนทับและบวกคลื่นความถี่ (WSOLA) เพื่อลดคุณภาพเสียง จึงไม่จำเป็นต้องปิดเสียงอีกต่อไป ซึ่งหมายความว่าตอนนี้คุณสามารถเล่นเสียงให้ช้าลงและเร็วขึ้นได้

ข้อบกพร่องของ Chromium