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

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 속성을 변경한 후.

자동 재생 태그를 사용해 보았는데 .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

추가 정보: .load()는 비디오 요소 내부에 html 소스 요소가 있는 경우에만 작동합니다.<source src="demo.mp4" type="video/mp4" />)

질문하지 않는 방법은 다음과 같습니다.

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();

저는 차라리 이렇게 하고 싶습니다.

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

</video>

그 다음에 사용합니다.

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

제이쿼리

<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();
  });
});

저에게 효과가 있었던 것은 소스를 바꾼 후에 '재생' 명령을 내리는 것이었습니다.jQuery 인스턴스를 통해 'play()'를 사용할 수 없는 이상하게도 getElementBy를 사용하게 됩니다.ID는 다음과 같습니다.

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>

여기서 variable은 javascript/jquery variable value이고 비디오 태그는 다음과 같습니다.

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

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

언급URL : https://stackoverflow.com/questions/3983036/how-do-you-change-video-src-using-jquery