点击一个链接时更新视频源

我想要一个带有嵌入视频的页面，当点击视频帧下面的链接时，它会动态地改变源。源视频位于我的主机服务器上。即该PIC说明它：点击一个链接时更新视频源

sample of page http://imageshack.us/a/img829/7679/testvidresult.png

我遇到this page，这似乎找到了答案，但我想它和它没有工作。下面的例子中，我粘贴了CSS中的css & javascript和body中必需的html。我更新了所有对我的网址的引用，并试图保留文件名与测试示例相同。以下是我试过的。

有人可以指出我的错误，或提供一个更优雅的方式来做到这一点？点击链接时基本上可以动态更改嵌入的视频，并且视频可以在所有常用浏览器和大多数设备上运行。这是一个WordPress站点， ~~使用JW播放器为WordPress~~ ，（我的错误），而不是我发现这个脚本/代码实际上是Video.js

它加载图像前，但不玩了。

作为一个测试，我想这和它正常播放单个视频：

<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300"  controls="controls"> 
       <source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/> 
       <source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/> 
       <source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/> 
</video>

JavaScript版本多源链接

<html> 
    <head> 
     <title></title> 
     <style media="screen" type="text/css"> 
.wrap   { margin:30px auto 10px; text-align:center } 
.container  { width:440px; height:300px; border:5px solid #ccc } 
p    { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px } 
     </style> 
<script> 
$("input[type=button]").click(function() { 
    var $target   = "testvid_"+$(this).attr("rel"); 
    var $content_path = "http://www.mywebsite.net/videos/"; 
    var $vid_obj  = _V_("div_video"); 

    // hide the current loaded poster 
    $("img.vjs-poster").hide(); 

    $vid_obj.ready(function() { 
     // hide the video UI 
     $("#div_video_html5_api").hide(); 
     // and stop it from playing 
     $vid_obj.pause(); 
     // assign the targeted videos to the source nodes 
     $("video:nth-child(1)").attr("src",$content_path+$target+".mp4"); 
     $("video:nth-child(1)").attr("src",$content_path+$target+".ogv"); 
     $("video:nth-child(1)").attr("src",$content_path+$target+".webm"); 
     // replace the poster source 
     $("img.vjs-poster").attr("src",$content_path+$target+".png").show(); 
     // reset the UI states 
     $(".vjs-big-play-button").show(); 
     $("#div_video").removeClass("vjs-playing").addClass("vjs-paused"); 
     // load the new sources 
     $vid_obj.load(); 
     $("#div_video_html5_api").show(); 
    }); 
}); 

$("input[rel='01']").click(); 
</script> </head> 

<body> 
     <section class="container wrap"> 
    <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data- 

setup="{}"> 
    <source src="" type="video/mp4"> 
    <source src="" type="video/ogg"> 
    <source src="" type="video/webm"> 
    </video> 
</section> 

<div class="wrap"> 
    <input rel="01" type="button" value="load video 1"> 
    <input rel="02" type="button" value="load video 2"> 
    <input rel="03" type="button" value="load video 3"> 
</div> 

    </body> 
</html>

预载图片第一个视频加载但没有视频，错误是 “没有支持格式和MIME类型的视频”

所以我说第一视频源在本节

setup="{}"> 
     <source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4" type="video/mp4"> 
     <source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv" type="video/ogg"> 
     <source src="http://www.mywebsite.net/videos/videos/testvid_01.webm type="video/webm"> 
     </video>

结果第一视频负载而不是其他链接的视频。

名的视频/ PNG的： testvid_01.mp4，testvid_01.ogv，testvid_01.webm，testvid_01.png testvid_02.mp4，testvid_02.ogv，testvid_02.webm，testvid_02.png testvid_03.mp4，testvid_03。 ogv，testvid_03.webm，testvid_03.png

我已经在wordpress页面和html页面中尝试了这个，结果是一样的。

即使这个脚本会做我想要的，我不确定吗？

来源

2013-05-18 user2397591

您是否尝试过使用JW Player's JavaScript API？从我所收集you can load a playlist并调用一个函数，将在一定的指数播放视频：指定索引处

playlistItem（指数）的播放列表项的

开始播放。

来源

2013-05-18 22:51:59 montrealist

感谢您的意见，但可能会超出我的意见，但我会看看这个。我需要用户选择他们想看的视频。所以必须找到正确的例子。再次感谢 – user2397591

这是一个WordPress站点，~~使用JW播放器的wordpress~~，（我的错误），而我发现这个脚本/代码实际上是[Video.js]（http://www.videojs.com/） – user2397591

点击一个链接时更新视频源

回答

相关问题