페이지에 표시되지 않고 HTML5 비디오 요소를 동적으로 만듭니다.

페이지에 표시되지 않고 HTML5 비디오 요소를 동적으로 만듭니다.

API로 액세스할 수 있도록 HTML5 비디오 요소를 동적으로 만드는 것이 가능합니까?document.getElementById또는 이름이지만 웹 페이지에 표시되지 않을 수 있습니다.

비슷한 것div.hide()아니면 그 방향으로 뭔가?

시도해 보세요

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브라우저에 따라 다릅니다.빈 문자열은 재생할 수 없음을 의미합니다.

이제 사용할 수 있습니다.videoAPI를 사용합니다.전 세계에 저장할 수 있습니다.나중에 DOM에 삽입할 수 있습니다.이게 도움이 되길 바랍니다.

물론 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

서버가 설정된 방식에 따라 필요하지 않을 수도 있지만 서버에서 비디오를 재생하는 데 문제가 발생하지만 개발 시스템의 localhost에서 재생하면 문제를 해결할 수 있습니다. .htaccess는 비디오 파일이 있는 폴더의 서버 쪽에 배치해야 합니다.

이제 getElementById(...)에서 이 요소를 사용할 수 있도록 하려면 요소를 만들 때 ID를 설정하면 됩니다.

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

이제 다음을 사용하여 찾을 수 있습니다.

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

그러나 누군가가 이미 언급했듯이 요소를 이미 만들고 해당 요소를 가리키는 변수가 있는 경우에는 이 작업을 수행할 필요가 없습니다.그냥 직접 사용하세요.

이것이 도움이 되길 바랍니다 :-)

Google 검색이 이를 위한 최신(그리고 가장 간단한) 방법입니다(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);

언급URL : https://stackoverflow.com/questions/19251983/dynamically-create-a-html5-video-element-without-it-being-shown-in-the-page