web-dev-qa-db-ja.com

jQueryを使用してビデオソースをどのように変更しますか？

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

Firebugを使用して検査するとsrcが変更されますが、実際に再生されているビデオは変更されません。

.pause（）と.load（）について読みましたが、それらの使用方法がわかりません。

jqueryvideohtml5
66
Aximili

Src属性を変更した後、$("#divVideo video")[0].load();を試してください。

121
Šime Vidas

私はむしろこのようにします

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

</video>

そして使用する

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

自動再生タグを使用しようとしましたが、少なくともchrome（おそらく私の設定）で.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" />）

非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();
9
vipero07
     $(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.
1
sheelpriy

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

私のために働いたのは、ソースを変更した後に「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();
0
Kokodoko

最も簡単な方法は、自動再生を使用することです。

<video autoplay></video>

Javascriptを使用してsrcを変更する場合、load（）に言及する必要はありません。

0
Hasanavi