web-dev-qa-db-ja.com

ページに表示されずにHTML5ビデオ要素を動的に作成します

_document.getElementById_やNameなどのAPIで要素にアクセスできるようにHTML5ビデオ要素を動的に作成することはできますが、Webページに表示されない場合があります。

div.hide()またはその方向の何かのようなものですか？

javascriptajaxdomhtml5-video
15
Swaraj Chhatre

あなたが試すことができます

var video = document.createElement('video');

video.src = 'urlToVideo.ogg';
video.autoplay = true;

ソースを設定する前に、canPlayTypeメソッドを使用して、使用するビデオ形式がブラウザでサポートされているかどうかを確認することもできます

if (video.canPlayType('video/ogg').length > 0) {
    /* set some video source */
}

このメソッドは、ブラウザに応じてmaybeまたはperhapsを返します。空の文字列の場合、再生できないことを意味します。

APIを使用してvideoを使用できるようになりました。グローバルに保存するだけです。後でDOMに挿入できます。お役に立てれば。

29
Mike-O

JSを使用するだけですべてを作成できます。 html本文で事前に作成する必要はありません。

JSで動画要素を作成する簡単な方法を次に示します。

var videlem = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
videlem.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources

これを行う前に、ブラウザがビデオ要素をサポートしているかどうか、またサポートしている場合は、再生できるファイル形式を確認する必要があります。これは次の方法で実行できます。

var supportsVideoElement = !!document.createElement('video').canPlayType;

次に、ビデオ要素がサポートされている場合、再生できるビデオ形式をテストします。

var temp = document.createElement('video');
var canPlay_MP4 = temp.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
var canPlay_OGV = temp.canPlayType('video/ogg; codecs="theora,vorbis"');
var canPlay_WEMB = temp.canPlayType('video/webm; codecs="vp8,vorbis"');

この後、JSのみを使用し、適切なビデオソースを設定して、ビデオ要素をページに追加できます。行を追加する必要があるサーバー側の.htaccessに問題がある可能性があります。

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

これは、サーバーの設定方法によっては必要ない場合がありますが、サーバーからのビデオの再生で問題が発生した場合でも、たとえば、開発マシンのローカルホスト、これは問題を解決できます。上記の行を含む.htaccessは、サーバー側のビデオファイルがあるフォルダーに配置する必要があります。

さて、この要素をgetElementById（...）で使用可能にするには、作成時に要素のidを設定するだけです。

var videlem = document.createElement("video");
videlem.id = "xxxxxx";

そして今、あなたは後でそれを使用してそれを見つけることができます：

var videlem = document.getElementById("xxxxxx");

ただし、誰かがすでにコメントしているように、既に要素を作成し、それを指す変数がある場合は、これを行う必要はありません...直接使用するだけです。

お役に立てれば ：-）

21
Sinisa

これを達成するための更新された（そして最も簡単な）方法（Google検索がここをリードしているため）：

var x = document.createElement("VIDEO");

if (x.canPlayType("video/mp4")) {
    x.setAttribute("src","movie.mp4");
} else {
    x.setAttribute("src","movie.ogg");
}

x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
4
Sam