カテゴリー別アーカイブ: HTML5

videoタグでストリーミングしない方法


HTML5のvideoタグを使うと、動画など自動でストリーミングになってしまう。
rangeヘッダに対応していないサーバと連携しなければならない場合は、videoタグがストリーミング再生前提でサーバにリクエストを行ってしまうと、うまくサーバがコンテンツを返してくれない問題が発生する場合がある。

この自動でストリーミングする動作を切る方法は、Videoタグの属性には存在しない!ので、xhrで動画を取得し、videoタグにセットする必要がある。
以下のような感じで解決できた。

## HTML

1
<video id="video"></video>

## CoffeeScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  videoUrl = 'http://hai3.net/video.mp4'

  xhr = new XMLHttpRequest()
  xhr.open("GET", videoUrl, true)
  xhr.responseType = "arraybuffer"
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  xhr.onload = ->
    return if @status != 200

    blob = new Blob([new Uint8Array(@response)], { type: @getResponseHeader('Content-Type').split(';')[0] })
    dataUrl = URL.createObjectURL(blob);
    document.getElementById('video').setAttribute('src', dataUrl);

  xhr.send()

これでストリーミングしないvideo要素になる。
videoタグの属性で無効化出来ても良いのでは。。?