programing

HTML5 비디오 태그의 소스 변경

bestprogram 2023. 7. 26. 22:15

HTML5 비디오 태그의 소스 변경

저는 모든 곳에서 작동하는 비디오 플레이어를 만들려고 노력하고 있습니다. 지금까지 저는 다음과 같이 생각했습니다.

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(를 들어, 모든 사람을 위한 비디오 등 여러 사이트에서 볼 수 있음) 지금까지는 좋습니다.

하지만 이제는 다른 비디오를 선택할 수 있는 비디오 플레이어와 함께 재생 목록/메뉴도 필요합니다.그것들은 내 선수 안에서 즉시 열려야 합니다.그래서 저는 자바스크립트로 "동적으로 비디오의 소스를 변경해야 할 것입니다."(dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - "다른 영화를 봅시다" 섹션에서 볼 수 있습니다.플래시 플레이어(따라서 IE) 부분은 당분간 잊어버리자, 나중에 처리하도록 노력하겠습니다.

그래서 나의 JS는 그것을 바꾸어야 합니다.<source>태그는 다음과 같아야 합니다.

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

문제는 이것이 모든 브라우저에서 작동하지 않는다는 것입니다.즉, 파이어폭스에는 제가 겪고 있는 문제를 관찰할 수 있는 좋은 페이지가 있습니다. http://www.w3.org/2010/05/video/mediaevents.html

내가방당때마다길를쇠아▁as.load()방법(파이어폭스에서는 주의하십시오), 비디오 플레이어가 사망합니다.

여러 때 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ<source>의 그태, 하나만대신src 내의 <video>태그, 파이어폭스에서 모든 이 작동합니다.

그래서 제 계획은 그냥 그것을 사용하는 것입니다.src속성을 지정하고 canPlayType() 함수를 사용하여 적절한 파일을 결정합니다.

제가 뭔가 잘못하고 있는 것일까요, 아니면 일을 복잡하게 만들고 있는 것일까요?

저는 이 모든 대답들이 너무 짧거나 다른 틀에 의존했기 때문에 싫었습니다.

다음은 Chrome에서 작동하는 "하나의" 바닐라 JS 방법입니다. 다른 브라우저에서 테스트하십시오.

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

source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();
console.log({
  src: source.getAttribute('src'),
  type: source.getAttribute('type'),
});

setTimeout(function() {
  video.pause();

  source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
  console.log({
    src: source.getAttribute('src'),
    type: source.getAttribute('type'),
  });
}, 3000);
<video id="video" width="320" height="240"></video>

외부 링크

모더니즈르는 저에게 매력적으로 작용했습니다.

제가 한 것은 제가 사용하지 않은 것입니다.<source>비디오가 처음 로드()만 작동했기 때문에 어떻게든 일을 망쳤습니다.태그 안에 했습니다 -> 대신비태안있소는스사속다니 -><video src="blabla.webm" />Modernizr을 사용하여 브라우저가 지원하는 형식을 결정했습니다.

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

이것이 당신에게 도움이 되기를 바랍니다 :)

Modernizr을 사용하지 않으려는 경우 언제든지 CanPlayType()사용할 수 있습니다.

당신의 원래 계획은 괜찮은 것 같습니다.여러분은 하는 것을 더 할 수 있을 <source>W3 사양 노트에 표시된 요소:

비디오 또는 오디오 요소에 요소가 이미 삽입되어 있는 경우 소스 요소와 해당 속성을 동적으로 수정해도 아무런 영향을 받지 않습니다.재생 중인 내용을 변경하려면 미디어 요소의 src 속성을 직접 사용하면 됩니다. 가능하면 canPlayType() 메서드를 사용하여 사용 가능한 리소스 중에서 선택할 수 있습니다.일반적으로 문서를 구문 분석한 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 방법입니다.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

나는 이 간단한 방법으로 이것을 해결했습니다.

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

플레이어에 파일을 것은 ?<video>요소를 추가하고 다시 만듭니다.대부분의 브라우저는 src가 정확하면 자동으로 로드됩니다.

예(프로토타입 사용):

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

사양에 따라

비디오 또는 오디오 요소에 요소가 이미 삽입되어 있는 경우 소스 요소와 해당 속성을 동적으로 수정해도 아무런 영향을 받지 않습니다.재생 중인 내용을 변경하려면 미디어 요소의 src 속성을 직접 사용하면 됩니다. 가능하면 canPlayType() 메서드를 사용하여 사용 가능한 리소스 중에서 선택할 수 있습니다.일반적으로 문서를 구문 분석한 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 방법입니다.

그래서 당신이 하려는 것은 분명히 효과가 없어야 합니다.

디브를 넣고 내용을 업데이트하면 됩니다.

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Yaur: 당신이 복사하고 붙여넣은 것이 좋은 조언이긴 하지만, 이것이 HTML5 비디오 요소의 소스 요소를 우아하게 변경하는 것이 IE9(또는 IE8)에서도 불가능하다는 것을 의미하지는 않습니다.(이 솔루션은 잘못된 코딩 관행이므로 전체 비디오 요소를 교체하지 않습니다.)

Javascript를 통해 HTML5 비디오 태그의 비디오를 변경/전환하는 완벽한 솔루션은 여기에서 찾을 수 있으며 모든 HTML5 브라우저(Firefox, Chrome, Safari, IE9 등)에서 테스트됩니다.

이것이 도움이 되거나 문제가 생기면 저에게 알려주세요.

이것이 제 해결책입니다.

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

저는 비슷한 웹 앱을 가지고 있고 그런 종류의 문제에 전혀 직면하지 않았습니다.제가 하는 일은 다음과 같습니다.

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

그런 다음 소스를 변경하고 싶을 때 다음과 같은 기능이 있습니다.

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

사용자가 재생 목록을 통과할 수 있도록 이 작업을 수행하지만 userAgent를 확인한 다음 해당 파일을 그런 식으로 로드할 수 있습니다.저는 인터넷의 모든 사람들이 제안하는 것처럼 여러 개의 소스 태그를 사용하려고 시도했지만, 단일 소스 태그의 src 속성을 조작하는 것이 훨씬 더 깨끗하고 신뢰할 수 있다는 것을 알게 되었습니다.위의 코드는 메모리에서 작성되었기 때문에 hte 세부 사항 중 일부를 얼버무렸을 수 있지만, 일반적인 아이디어는 적절한 경우 javascript를 사용하여 소스 태그의 src 속성을 동적으로 변경하는 것입니다.

제이쿼리에서 할 수 있는 또 다른 방법.

HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

제이쿼리

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

비디오 소스를 동적으로 변경하기 위해 이 기능을 사용합니다.때때로 파이어폭스에서 "can play" 이벤트가 실행되지 않아 "loadedmetadata"를 추가했습니다.또한 이전 비디오가 있으면 일시 중지합니다...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

<source />특히 Chrome 14.0.835.202에서는 태그가 어려웠지만 FireFox에서는 잘 작동했습니다. (이것이 저의 지식 부족일 수도 있지만, 어쨌든 대체 솔루션이 유용할 수도 있다고 생각했습니다.)그래서, 저는 그냥 사용하게 되었습니다.<video />비디오 태그 자체에 src 속성을 설정합니다.canPlayVideo('<mime type>')함수는 특정 브라우저가 입력 비디오를 재생할 수 있는지 여부를 결정하는 데 사용되었습니다.다음은 FireFox 및 Chrome에서 작동합니다.

덧붙여서, Chrome은 "webm"을 권장하지만 FireFox와 Chrome 모두 "ogg" 형식을 재생하고 있습니다.를 먼저 에 " FireFox가 ogg 소스를 먼저 선호함).<source src="..." type="video/ogg"/>를할 때 의 순서가 하지만, 저는 비디오 태그에 "src"를 설정할 때 코드의 순서가 차이가 있는지 여부를 전혀 테스트하지 않았습니다.

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

자바스크립트

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

저는 꽤 오랫동안 이것을 연구해 왔고 같은 일을 하려고 노력하고 있습니다. 그래서 이것이 다른 사람에게 도움이 되기를 바랍니다.저는 crossbrowsertesting.com 을 사용하고 있으며 문자 그대로 사람들에게 알려진 거의 모든 브라우저에서 이것을 테스트하고 있습니다.제가 현재 가지고 있는 솔루션은 오페라, 크롬, 파이어폭스 3.5+, IE8+, 아이폰 3GS, 아이폰 4, 아이폰 4s, 아이폰 5, 아이폰 5s, 아이패드 1+, 안드로이드 2.3+, 윈도우 폰 8에서 작동합니다.

동적으로 소스 변경

비디오를 동적으로 변경하는 것은 매우 어렵습니다. 플래시 폴백을 원하는 경우 DOM/페이지에서 비디오를 제거한 후 다시 추가하여 플래시가 플래시 변수에 대한 동적 업데이트를 인식하지 못하기 때문에 플래시가 업데이트되도록 해야 합니다.자바스크립트를 사용하여 동적으로 변경할 경우, 나는 모든 것을 제거할 것입니다.<source>요소 및 설정에 사용합니다.src 및 자바스크립트 »break또는return지원되는 첫 번째 비디오 유형 이후에 플래시 var mp4를 동적으로 업데이트하는 것을 잊지 마십시오.또한 일부 브라우저는 사용자가 호출하지 않으면 소스를 변경했음을 등록하지 않습니다.video.load()는 저는이문가의 합니다..load()당신이 경험하고 있던 것은 첫 번째 전화로 고칠 수 있습니다.video.pause()비디오 요소를 제거하고 추가하면 제거된 비디오를 계속 버퍼링하기 때문에 브라우저 속도가 느려질 수 있지만 해결 방법이 있습니다.

크로스 브라우저 지원

실제 크로스 브라우저 부분에서는 모두를 위한 비디오에도 도착했습니다.나는 이미 미디어 요소를 시도했습니다.JS Wordpress 플러그인은 해결된 것보다 훨씬 더 많은 문제를 일으키는 것으로 밝혀졌습니다.저는 이 문제들이 실제 라이브러리가 아닌 워드프레스 플러그인 때문이라고 생각합니다.가능하다면 자바스크립트 없이 작동하는 것을 찾고 있습니다.지금까지 제가 생각해낸 것은 다음과 같은 평범한 HTML입니다.

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

중요 참고 사항:

  • 결국 첫 번째로 계란을 넣었습니다.<source> OS Firefox는 첫 OS Firefox로 하기 때문입니다.<source>.
  • 올바른 MIME 유형이 중요합니다. ogv 파일은 다음과 같아야 합니다.video/ogg아닌 video/ogv
  • HD 비디오가 있다면, 제가 찾은 HD 품질 OGG 파일 중 최고의 트랜스코더는 Firefogg입니다.
  • .iphone.mp4파일은 H.264 Baseline 3 Video 및 AAC 오디오가 포함된 MPEG-4 비디오만 재생하는 iPhone 4+용입니다.그 형식에 대해 찾은 최고의 트랜스코더는 핸드브레이크입니다. 아이폰 & 아이팟 터치 사전 설정을 사용하면 아이폰 4+에서 작동하지만 아이폰 3GS가 작동하려면 훨씬 낮은 해상도를 가진 아이팟 사전 설정을 사용해야 합니다.video.iphone3g.mp4.
  • 미래에 우리는 다음을 사용할 수 있을 것입니다.media<source>미디어 쿼리가 있는 모바일 장치를 대상으로 하는 요소가 있지만 현재는 구형 Apple 및 Android 장치가 충분히 지원하지 않습니다.

편집:

  • 저는 여전히 모두를 위한 비디오를 사용하고 있지만 이제 FlowPlayer를 사용하여 플래시 폴백을 제어하는 것으로 전환했습니다. Flash 폴백은 이를 제어하는 데 사용할 수 있는 멋진 JavaScript API를 가지고 있습니다.

OGG 소스를 맨 위로 이동합니다.저는 파이어폭스가 때때로 혼동을 일으켜 게임을 하고 싶은 OGG가 처음이 아닐 때 플레이어를 멈추게 한다는 것을 알게 되었습니다.

해볼 만합니다.

당신은 그것을 바꾸려고 노력하지 말아야 합니다.src소스 요소의 속성( 사양 노트에 따라)

비디오 또는 오디오 요소에 요소가 이미 삽입되어 있는 경우 소스 요소와 해당 속성을 동적으로 수정해도 아무런 영향을 받지 않습니다.재생 중인 내용을 변경하려면 미디어 요소의 src 속성을 직접 사용하십시오.

예를 들어 다음과 같습니다.

<audio>
    <source src='./first-src'/>
</audio>

src를 수정하는 방법

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

이미 로드된 비디오가 있고 그 비디오에 새 비디오를 업로드하려고 하면 두 번째 비디오에서 videoRef.load()를 사용해야 합니다. 그렇지 않으면 로드되지 않습니다.

*videoRef는 표시된 <video> </video> 태그의 ref여야 합니다.

사실 html에서 비디오를 변경하는 것은 매우 간단합니다. load() 방법으로 충분합니다. 구글에서 테스트하고 테스트하기 위해 간단한 비디오 변경 페이지를 만들었습니다. 여기서 제 코드를 보세요. 저는 API를 사용하여 무작위 비디오 URL을 제공했지만 때때로 그것은 제게 jpg 또는 다른 형식을 제공합니다. 만약 그렇지 않다면 제가 시도해야 하는 이유입니다.

    async function FetchDog() {
        let response = await fetch("https://random.dog/woof.json");
        let data = await response.json();
        let url = data.url;
        let extension = url.slice(url.length-3,url.length);
        if(extension === 'mp4'){
          document.getElementById("dogVideo").setAttribute("src", url);
          document.getElementById("video").load();
        }
         console.log(url);
      }
<!DOCTYPE html>
<html>
  <body>
    <video id="video" width="320" height="240" controls>
      <source
        id="dogVideo"
        src="https://random.dog/5ab72e24-0ae5-45d4-aaaa-10e4bfc021b6.mp4"
        type="video/mp4"
      />
      Your browser does not support the video tag.
    </video>
    <br />
    <br />
    <p id="response"></p>
    <button onclick="FetchDog()">Fetch dog video</button>
   <sript src='your_js_file'> </script>
  </body>
</html>

JavaScript 및 jQuery 사용:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>

결국 합격된 답변을 함수로 만들고 시간을 지키기 위해 이력서를 개선했습니다. TLDR

    /**
     * https://stackoverflow.com/a/18454389/4530300
     * This inspired a little function to replace a video source and play the video.
     * @param video
     * @param source
     * @param src
     * @param type
     */
    function swapSource(video, source, src, type) {
        let dur = video.duration;
        let t = video.currentTime;
        // var video = document.getElementById('video');
        // var source = document.createElement('source');
        video.pause();
        source.setAttribute('src', src);
        source.setAttribute('type', type);

        video.load();
        video.currentTime = t;
        // video.appendChild(source);
        video.play();
        console.log("Updated Sorce: ", {
            src: source.getAttribute('src'),
            type: source.getAttribute('type'),
        });
    }

동영상은 웹 사이트 로컬 디렉터리에 저장되고 전체 URL을 사용하여 액세스합니다. BLOB 개체 및 액세스로 변환하지 마십시오.

비디오 HTML5 태그

 <video id="videoHelp" width="560" height="340" controls autoplay 
    muted>
    <source id="videoHelpSRC" src="" type='video/mp4'>
    </video>

앵커 태그 클릭 시 비디오 소스 변경

<a onclick="changeSource('Video-1.mp4'); return false;" 
href="">Video-1</a>
<a onclick="changeSource('Video-2.mp4'); return false;" 
href="">Video-2</a>

앵커 태그 클릭 시 비디오 소스를 변경하는 Java 스크립트

function changeSource(videoName) {
        var videoPlayer = document.getElementById('videoHelp');

        /*Remove child - only need one video source at a time */
        while (videoPlayer.firstChild) {
            videoPlayer.firstChild.remove()
        }
        videoPlayer.load();

        var source = document.createElement('source');
        source.setAttribute('src', window.location.origin + 
'/Content/Videos/' + videoName);
        source.setAttribute('type', 'video/mp4');
        videoPlayer.appendChild(source);
        videoPlayer.play();
    }

마녀는 나를 위해 일하는 가장 간단한 방법:

HTML 코드:

<video width="100%" id="headerVideo" loop>
       <source src="videos/illustration.mp4" type="video/mp4">
</video>

JS 코드:

function loadDifferentVideo(src){
    headerVideo.getElementsByTagName('source')[0].setAttribute('src',src);
    headerVideo.load();
    headerVideo.play();
}

loadDifferentVideo('videos/illustration.mp4');

언급URL : https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag