12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

動的にVideoタグを生成する

Last updated at Posted at 2014-06-01

背景

Chromeでは内部的にWebP形式を扱えたりするみたいで、比較的容易にWebMの生成が動的の行える。

また、Emscriptenでffmpegや、libvpxのjs化が行われているので、Firefoxでも動的にWebMの生成が用意に行えるようになった。

単純にVideoタグを生成するだけだとダメ

videoタグにcontrols属性をsetAttributeで追加すると
コントロールが有効になり、フツーに扱える。

var video = document.createElement("video");
video.src=hogeUrl; // 動的に生成した動画のURL
video.setAttribute("controls","");

document.body.appendChild(video);

注意

どうも、動的に生成したWebMの中には、1度限りしか、この
方法で再生出来ないファイルもある模様。

生成されたファイル単独ではフツーにブラウザで開くと、
何度でも再生出来るのの、この方法で動的に生成した
videoタグでは1度再生すると以降、うまく再生出来ない
こともある

Link

関連記事

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?