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>

此视频已切换并完美播放，但是如果我从

替换src文件

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

到当地的某个地方，例如

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

这是同一个文件，这也可以很好地播放，但现在鼠标点击事件不起作用。

绑定代码是：

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

为什么它现在有用 - 天知道！

jQuery src不会在点击事件

1 个答案: