Question

jVideo.jsを使用してデモビデオを読み込んで、完全に再生する次のコードがあります。

<div id="divVideo"> 
    <video id="videoId" class="video-js vjs-default-skin" 
    controls preload="auto" width="640" height="264" 
    data-setup='{ "playbackRates": [0.5, 1, 1.5, 4, 8] }' /> 
     <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /> 
     <p class="vjs-no-js"> To view this video please enable JavaScript, and consider 
      upgrading to a web browser that supports HTML5 video 
     </p> 
    </video> 
</div> 

ここで、デモビデオを切り替えて別のビデオを再生するマウスクリックイベントを追加します。

<script> 
function canvasClick() { 
    var videoFile = 'data/video1/20160705_081435_E.mp4'; 
    $('#divVideo video source').attr('src',videoFile); 
    $("#divVideo video")[0].load(); 
}; 
</script> 

このビデオでは、中にスイッチされ、例えば、私は地元の何かに

<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /> 

からのsrcファイルを置き換えるがあれば、同様に完璧に果たしている：

マウスクリックイベントはこちら

<source src="Videos/oceans-clip.mp4" type="video/mp4" /> 

同じファイルですが、これも完全に再生されますが、現在はマウスクリックイベントdoうまくいきません。

結合コードは次のとおりです。

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map,marker); 
    canvasClick(); 

質問がされ、私のマウスのクリックイベントや私のHTMLの構造に何か問題はありますか？

Answer 1

わかりました。 <source>タグを削除します。コードは次のようになりますよう

<div id="divVideo"> 
      <video id="videoId" class="video-js vjs-default-skin" 
      controls preload="auto" width="640" height="264" 
      data-setup='{ "playbackRates": [0.5, 1, 1.5, 4, 8] }' 
      src="videos/oceans-clip.mp4" type="video/mp4" /> 
      <p class="vjs-no-js"> To view this video please enable JavaScript, and consider 
       upgrading to a web browser that supports HTML5 video 
      </p> 
     </video> 
    </div> 

とjQuery：

<script> 
function canvasClick() { 
    var videoFile = 'data/video1/20160705_081435_E.mp4'; 
    $('#divVideo video').attr('src',videoFile); 
    $('#divVideo video')[0].load(); 
}; 

それが動作するようになりましなぜ - 天が知っています！