點擊一個鏈接時更新視頻源

我想要一個帶有嵌入視頻的頁面，當點擊視頻幀下面的鏈接時，它會動態地改變源。源視頻位於我的主機服務器上。即該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

點擊一個鏈接時更新視頻源

回答

相關問題