jQuery를 사용하여 비디오 src를 어떻게 변경합니까?

jQuery를 사용하여 HTML5 비디오 태그의 src를 어떻게 변경합니까?

이 HTML을 얻었습니다.

<div id="divVideo">
  <video controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

작동하지 않습니다.

var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);

방화범을 사용하여 검사하면 src가 변경되지만 실제로 재생되는 비디오는 변경되지 않습니다.

.pause () 및 .load ()에 대해 읽었지만 사용 방법을 모르겠습니다.

$("#divVideo video")[0].load();src 속성을 변경 한 후 시도하십시오 .

차라리 이렇게 만들고 싶어

<video  id="v1" width="320" height="240" controls="controls">

</video>

그런 다음

$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );

나는 autoplay 태그를 사용해 보았고 .load () .play ()는 여전히 적어도 크롬에서 호출해야합니다 (아마도 내 설정 일 수도 있습니다).

예제를 사용하여 jquery로 이것을 수행하는 가장 간단한 크로스 브라우저 방법은 다음과 같습니다.

var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();

그러나 내가 (가독성과 단순성을 위해) 제안하는 방법은

var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();

추가 자료 http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

추가 정보 : 비디오 요소 내부의 HTML 소스 요소가있는 경우 .load는 ()는 (예를 작동 <source src="demo.mp4" type="video/mp4" />)

비 jquery 방식은 다음과 같습니다.

HTML

<div id="divVideo">
  <video id="videoID" controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

JS

var video = document.getElementById('videoID');
video.src = videoFile;
video.load();
video.play();

JQUERY

<script type="text/javascript">
$(document).ready(function() {
  var videoID = 'videoclip';
  var sourceID = 'mp4video';
  var newmp4 = 'media/video2.mp4';
  var newposter = 'media/video-poster2.jpg';
 
  $('#videolink1').click(function(event) {
    $('#'+videoID).get(0).pause();
    $('#'+sourceID).attr('src', newmp4);
    $('#'+videoID).get(0).load();
     //$('#'+videoID).attr('poster', newposter); //Change video poster
    $('#'+videoID).get(0).play();
  });
});

나를 위해 일한 것은 소스를 변경 한 후 'play'명령을 내리는 것입니다. 이상하게도 jQuery 인스턴스를 통해 'play ()'를 사용할 수 없으므로 다음과 같이 getElementByID를 사용하면됩니다.

HTML

<video id="videoplayer" width="480" height="360"></video>

자바 스크립트

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();

     $(document).ready(function () {     
    setTimeout(function () {
                    $(".imgthumbnew").click(function () {
                        $("#divVideo video").attr({
                            "src": $(this).data("item"),
                            "autoplay": "autoplay",        
                        })
                    })
                }, 2000); 
            }
        });

here ".imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url. u can change according to your convenient.
i would suggest you to give an ID to ur Video tag it would be easy to handle.

가장 쉬운 방법은 자동 재생을 사용하는 것입니다.

<video autoplay></video>

javascript를 통해 src를 변경할 때 load ()를 언급 할 필요가 없습니다.

이것은 Flowplayer 6.0.2에서 작동합니다 .

<script>
    flowplayer().load({
         sources: [
            { type: "video/mp4",  src: variable }
            ]
        });
</script>

여기서 변수 는 javascript / jquery 변수 값입니다. 동영상 태그는 다음과 같아야합니다.

<div class="flowplayer">
   <video>
      <source type="video/mp4" src="" class="videomp4">
   </video>
</div>

누구에게나 도움이되기를 바랍니다.