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

François Beaufort
François Beaufort
GitHub

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

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

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

สรุปสั้นๆ คือวิธีการทำงานของการถอดรหัสข้อมูล 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 เป็นช่วงทดลองใช้จากต้นทางเพื่อรับความคิดเห็นจากนักพัฒนาซอฟต์แวร์ที่ใช้ DecodeInfo API (ส่วนหนึ่งของความสามารถของสื่อ) ในวงจำกัดไว้ให้มากที่สุด

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

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

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

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

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

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

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

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

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

นักพัฒนาเว็บสามารถตรวจจับขอบเขตสีโดยประมาณที่อุปกรณ์เอาต์พุตรองรับด้วยคําค้นหาสื่อสีขอบเขตล่าสุด และจำนวนบิตที่ใช้แสดงสีบนหน้าจอด้วย 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

ใบอนุญาตถาวรในส่วนขยายสื่อที่เข้ารหัส (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.
});

คุณลองใช้ใบอนุญาตถาวรด้วยตัวเองได้ที่ Sample Media 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

ฟีเจอร์การเล่นที่ไม่รองรับจะเพิ่มข้อยกเว้น

หลังจากการเปลี่ยนแปลงข้อกำหนด 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

นำการปิดเสียงออกสำหรับ playRates สูงสุด

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

ข้อบกพร่อง Chromium