video.js - 點擊鏈接時更新視頻源

我想要一個帶有嵌入視頻的頁面，當點擊視頻幀下面的鏈接時，它會動態地改變源代碼。源視頻位於我的主機服務器上。即該PIC說明它：video.js - 點擊鏈接時更新視頻源

[頁的樣品] [1]

我遇到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-20 user2397591

javascript示例未顯示包含video.js庫。您可能會嘗試在頭部添加以下內容。

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/c/video.js"></script>

否則，有沒有辦法查看某個地方的網頁？

來源

2013-05-22 18:22:12 heff

這會覆蓋視頻元素的src屬性三次，因此它將始終設置爲webm視頻。

$("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");

而是使用video.js API加載的光源陣列等等的Video.js可以選擇一個當前播放技術可以播放：

$vid_obj.src([ 
    { type: "video/mp4", src: $content_path+$target+".mp4" }, 
    { type: "video/webm", src: $content_path+$target+".webm" }, 
    { type: "video/ogg", src: $content_path+$target+".ogv" } 
]);

更新小提琴：http://jsfiddle.net/mister_ben/8awNt/

來源

2013-05-23 12:40:28 misterben

video.js API鏈接已死亡。 – Atomosk

添加到整體回答原始問題，上面misterben回答的視頻切換仍然適用於video.js的當前版本（4.8.0），但更改海報圖像的代碼不能從原始問題帖開始工作，或截至2014年9月5日的jsfiddle code sample。

你需要從兩個小修改user239759的原代碼有問題（下面引用）：

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

... 
... 
... 

// replace the poster source 
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();

這樣：

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

... 
... 
... 

// replace the poster source 
$(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();

這是，如果你使用的是標準的Video.js代碼和相關的CSS。

對於那些還沒有從上面的代碼中弄清楚的人來說，海報圖片應該和文件擴展名一樣被命名爲視頻，並且放在與視頻相同的目錄中。除非您爲海報圖像使用$content_path的其他變量。

來源

2014-09-05 10:03:32 kenjikato

video.js - 點擊鏈接時更新視頻源

回答

相關問題