Skip to content

useMediaControls blob duration chrome bug #1003

@KaliaJS

Description

@KaliaJS

I noticed that the composable suffers from the chrome bug when used with blobs (Chrome bug)

I used this package before I used useMediaControls and it works fine :
evictor/get-blob-duration

/**
 * @param {Blob|String} blob
 *
 * @returns {Promise<Number>} Blob duration in seconds.
 */
export default async function getBlobDuration(blob) {
  const tempVideoEl = document.createElement('video')

  const durationP = new Promise((resolve, reject) => {
    tempVideoEl.addEventListener('loadedmetadata', () => {
      // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=642012
      if(tempVideoEl.duration === Infinity) {
        tempVideoEl.currentTime = Number.MAX_SAFE_INTEGER
        tempVideoEl.ontimeupdate = () => {
          tempVideoEl.ontimeupdate = null
          resolve(tempVideoEl.duration)
          tempVideoEl.currentTime = 0
        }
      }
      // Normal behavior
      else
        resolve(tempVideoEl.duration)
    })
    tempVideoEl.onerror = (event) => reject(event.target.error)
  })

  tempVideoEl.src = typeof blob === 'string' || blob instanceof String
    ? blob
    : window.URL.createObjectURL(blob)

  return durationP
}

Would it be possible to integrate that into the composable?

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions