video.js - Videoquelle aktualisieren, wenn Sie auf einen Link klicken

Ich versuche eine Seite mit eingebettetem Video zu erstellen, die dynamisch die Quelle ändert, wenn auf einen Link unterhalb des Videoframes geklickt wird. Die Quellvideos befinden sich auf meinem Host-Server. heißt dieses Bild zeigt es:video.js - Videoquelle aktualisieren, wenn Sie auf einen Link klicken

[Probe Seite] [1]

ich über this page kam, was die Antwort zu haben scheint, aber ich versuchte es und es hat nicht funktioniert!. Nach dem Beispiel, klebte ich die CSS & Javascript in die und die notwendigen HTML in den Körper. Ich habe alle Verweise auf meine URLs aktualisiert und versucht, die Dateinamen wie im Testbeispiel beizubehalten. Unten ist was ich versucht habe.

Kann jemand auf meine Fehler hinweisen oder einen eleganteren Weg dazu bieten? Ändern Sie das eingebettete Video grundsätzlich dynamisch, wenn auf den Link geklickt wird und das Video in allen typischen Browsern und auf den meisten Geräten funktioniert. Diese ist für eine Wordpress-Seite, ~~mit JW Player für Wordpress~~ , (mein Fehler) statt fand ich dieses Skript/Code ist eigentlich für Video.js

Es lädt die Pre Bild aber nicht abgespielt.

Als Test habe ich das versucht, und es tut richtig einzelnes Video spielen:

<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>

Die JavaScript-Version für mehrere Quell Links

<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>

Die Vorspannung für die 1. Video lädt aber kein Video, Fehler ist "Kein Video mit unterstütztem Format und MIME-Typ gefunden"

So habe ich die Quelle für das erste Video in diesem Abschnitt

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>

Ergebnis der ersten Video lädt aber nicht die anderen verknüpften Videos.

Namen des Videos/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

Ich habe versucht, dies sowohl in Wordpress-Seite und HTML-Seite die Ergebnisse sind die gleichen.

Ich bin mir nicht sicher, auch wenn dieses Skript tun wird, was ich will?

Quelle

2013-05-20 user2397591

Das JavaScript-Beispiel scheint die video.js-Bibliothek nicht zu enthalten. Sie könnten versuchen, das Folgende in den Kopf aufzunehmen.

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

Sonst gibt es eine Möglichkeit, die Seite irgendwo zu sehen?

Quelle

2013-05-22 18:22:12 heff

Dies überschreibt das src-Attribut des Videoelements dreimal, sodass es immer auf das Webm-Video eingestellt wird.

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

Statt die video.js API verwenden, um eine Reihe von Quellen zu laden, so Video.js eine die aktuelle Wiedergabe tech kann spielen auswählen können:

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

Aktualisiert Geige: http://jsfiddle.net/mister_ben/8awNt/

Quelle

2013-05-23 12:40:28 misterben

video.js API-Verbindung ist tot. – Atomosk

zum Gesamt Hinzufügen Antwort auf die ursprüngliche Frage, das Video-Switch von Misterben oben beantwortet funktioniert immer noch in der aktuellen Version (4.8.0) von video.js, aber der Code, der das Poster Bild ändert funktioniert nicht von der ursprünglichen Frage Post, oder in der jsfiddle code sample ab dem 9.5.2014.

Sie benötigen zwei kleine Modifikationen an user239759 ursprünglichen Fragecode (referenzierten unten), um aus:

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

... 
... 
... 

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

dazu:

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

... 
... 
... 

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

Dies ist, wenn Sie den Standard-Video.js verwenden Code und assoziierte CSS.

Es sollte auch für diejenigen beachtet werden, die es aus dem obigen Code nicht herausgefunden haben, sollten die Poster Bilder die gleichen wie die Videos mit Ausnahme der Dateierweiterung benannt werden, und im selben Verzeichnis wie die Videos platziert werden. Es sei denn, Sie verwenden eine andere var für $content_path für die Posterbilder.

Quelle

2014-09-05 10:03:32 kenjikato

video.js - Videoquelle aktualisieren, wenn Sie auf einen Link klicken

Antwort

Verwandte Themen