Ändern der Quelle auf dem HTML5-Video-Tag

138

Ich versuche einen Videoplayer zu bauen, der überall funktioniert. Bisher würde ich gehen mit:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(wie auf mehreren Websites zu sehen, zum Beispiel Video für alle ) so weit, so gut.

aber jetzt möchte ich auch eine Art Wiedergabeliste / Menü zusammen mit dem Videoplayer, aus dem ich andere Videos auswählen kann. Diese sollten sofort in meinem Player geöffnet werden. Also muss ich "die Quelle des Videos dynamisch ändern" (wie auf dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ zu sehen). - Abschnitt "Schauen wir uns einen anderen Film an ") mit Javascript. Vergessen wir vorerst den Flashplayer (und damit den IE) Teil, ich werde später versuchen, damit umzugehen.

Mein JS zum Ändern der <source>Tags sollte also ungefähr so ​​aussehen:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

Das Problem ist, dass dies nicht in allen Browsern funktioniert. Firefox = O, es gibt eine schöne Seite, auf der Sie das Problem beobachten können, das ich habe: http://www.w3.org/2010/05/video/mediaevents.html

Sobald ich die load () -Methode auslöse (wohlgemerkt in Firefox), stirbt der Videoplayer.

Jetzt habe ich herausgefunden, dass, wenn ich nicht mehrere <source>Tags verwende, sondern nur ein src-Attribut innerhalb des <video>Tags, das Ganze in Firefox funktioniert.

Mein Plan ist es also, nur dieses src-Attribut zu verwenden und die entsprechende Datei mit der Funktion canPlayType () zu ermitteln .

mache ich es irgendwie falsch oder kompliziere ich die Dinge?

Sashn
quelle
Das klingt gut für mich. Wie ist es "kompliziert", das Markup zu vereinfachen?
Matt Ball
Das Problem ist, ich sehe mich in eine Menge Javascript und Unterscheidung von Fällen stoßen. Wenn ich vielleicht etwas verpasst habe, als gäbe es eine Möglichkeit, es in Firefox mit mehreren <source>Tags zum Laufen zu bringen. dann würde das wohl einfacher sein
sashn
Hast du jemals etwas über den Flash-Teil auf ie8 herausgefunden?
Neeraj
@Neeraj Die endgültige Lösung war das Plugin video.js , das einen Flash-Player als Fallback für IE8 und ähnliche verwendet. Es könnte heute jedoch überlegene Plugins geben. Die Verwendung des Plugins half auch nicht bei dem Firefox-Problem bezüglich der load () -Methode, das die anfängliche Motivation für diesen Beitrag war. Heute ist dieses Problem anscheinend schon lange behoben.
Sashn

Antworten:

169

Ich hasste all diese Antworten, weil sie zu kurz waren oder sich auf andere Rahmenbedingungen stützten.

Hier ist "eine" Vanilla JS-Methode, die in Chrome funktioniert. Bitte testen Sie sie in anderen Browsern:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);
mattdlockyer
quelle
11
Dies war das sauberste und effizienteste für mich.
Phil McCarty
Ich konnte Chrome nicht dazu bringen, damit Ball zu spielen. NUR wenn ich das Video src Attribut auf den Webm Pfad setze
Adam Hey
2
Die Wiedergabemethode wird in einigen Browserrichtlinien nur von einer Benutzergeste zugelassen.
Anson
Ich schätze das aus einem anderen Grund so sehr! Ich habe versucht, eine Videoseite einzurichten, auf der KEIN Video angezeigt wird, bis der Besucher eines auswählt. Ich könnte ein Video-Tag mit einem leeren Quell-Tag einrichten, aber es würde immer einen Fehler auf einer Javascript-Debug-Konsole erzeugen. Jetzt weiß ich, dass ich das Hinzufügen einer 'Quelle' warten kann, bis der Benutzer eine auswählt. Bis jetzt habe ich nicht verstanden, dass ich CreateElement () verwenden muss, um eine Quelle zu erstellen, und dann appendChild () verwenden muss, um sie dem Videoelement hinzuzufügen! Bei der anschließenden Auswahl kann ich zuerst überprüfen, ob das Quellelement vorhanden ist, damit ich diesen Schritt nicht wiederhole.
Randy
Diese Lösung funktioniert hervorragend, wenn jemand mit dem Problem des Inhaltstyps aufgrund der Nutzdatenantwort konfrontiert ist, selbst wenn der angegebene Inhaltstyp korrekt ist, sich aber dennoch seltsam verhält.
meDeepakJain
63

Modernizr hat für mich wie ein Zauber gewirkt.

Was ich getan habe ist, dass ich nicht verwendet habe <source>. Irgendwie hat das alles vermasselt, da das Video nur beim ersten Aufruf von load () funktioniert hat. Stattdessen habe ich das Quellattribut im Video-Tag -> verwendet <video src="blabla.webm" />und mit Modernizr ermittelt, welches Format der Browser unterstützt.

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

Hoffentlich hilft dir das :)

Wenn Sie Modernizr nicht verwenden möchten , können Sie jederzeit CanPlayType () verwenden .

Marius Engen Haugen
quelle
Meinen Sie nicht v [n] [1] für die Sekunde, wenn (Modernizr.video && Modernizr.video.ogg) wahr ist?
bergie3000
1
Nachdem ich andere Methoden ausprobiert hatte, versuchte ich diesen Modernizr-Ansatz und er funktionierte gut. Chrome (aus irgendeinem Grund) würde in meinem Fall keine mp4 laden, sondern einen Webm. Danke @MariusEngenHaugen
Adam Hey
Ich bin froh, dass ich @AdamHey
Marius Engen Haugen
32

Ihr ursprünglicher Plan klingt für mich gut. Sie werden wahrscheinlich mehr Browser-Macken finden, die sich mit der dynamischen Verwaltung der <source>Elemente befassen , wie hier in der W3-Spezifikation angegeben:

Das dynamische Ändern eines Quellelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das Attribut src direkt für das Medienelement und verwenden Sie möglicherweise die Methode canPlayType (), um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Bearbeiten von Quellelementen nach dem Analysieren des Dokuments ein unnötig komplizierter Ansatz.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

greg.kindel
quelle
19

Ich habe das mit dieser einfachen Methode gelöst

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}
Joaquin Iurchuk
quelle
10

Anstatt denselben Videoplayer zum Laden neuer Dateien zu veranlassen, löschen Sie das gesamte <video>Element und erstellen Sie es neu. Die meisten Browser laden es automatisch, wenn die src's korrekt sind.

Beispiel (unter Verwendung eines Prototyps ):

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);
Stephen Walcher
quelle
6
Dies verlangsamt den gesamten Browser erheblich, da der Browser die entfernten Videos auch nach dem Entfernen des Video-Tags noch bis zum Ende lädt.
Moe Sweet
In einigen Browsern (mobil) können Sie Medien nicht programmgesteuert ohne Benutzerinteraktion abspielen. Da Sie bereits eine Interaktion mit dem Element durchgeführt haben, wird diese Fähigkeit durch Ersetzen durch ein neues Element verloren gehen.
Max Waterman
6

Setzen Sie einfach ein div und aktualisieren Sie den Inhalt ...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>
Jose Antonio Galeano
quelle
6

Nach der Spezifikation

Das dynamische Ändern eines Quellelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das Attribut src direkt für das Medienelement und verwenden Sie möglicherweise die Methode canPlayType (), um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Bearbeiten von Quellelementen nach dem Analysieren des Dokuments ein unnötig komplizierter Ansatz.

Was Sie also versuchen, soll anscheinend nicht funktionieren.

Yaur
quelle
@ greg.kindel Ich habe es bemerkt, nachdem ich gepostet habe ... aber der Grund, warum ich es überhaupt nicht bemerkt habe, ist, dass dein Intro-Text verwirrend ist. Über welchen ursprünglichen Plan sprechen wir? Der ursprüngliche ursprüngliche Plan, der nicht funktioniert, oder der aktualisierte ursprüngliche Plan, der den Anweisungen folgt, die wir beide veröffentlicht haben?
Yaur
fair genug, hätte ich zitieren sollen. Ich meinte seinen Plan, "nur dieses src-Attribut zu verwenden und die entsprechende Datei mit der Funktion canPlayType () zu ermitteln", was funktioniert.
Greg.kindel
4

Yaur: Obwohl das, was Sie kopiert und eingefügt haben, ein guter Rat ist, bedeutet dies nicht, dass es unmöglich ist, das Quellelement eines HTML5-Videoelements elegant zu ändern, selbst in IE9 (oder IE8). (Diese Lösung beinhaltet NICHT Ersetzen des gesamten Videoelements, da dies eine schlechte Codierungspraxis ist).

Eine vollständige Lösung zum Ändern / Wechseln von Videos in HTML5-Video-Tags über Javascript finden Sie hier und wird in allen HTML5-Browsern (Firefox, Chrome, Safari, IE9 usw.) getestet.

Wenn dies hilft oder wenn Sie Probleme haben, lassen Sie es mich bitte wissen.

mkralla11
quelle
Brillant! Dies ist der Weg, um es zu tun. Sie brauchen nicht einmal jQuery; Ersetzen Sie im verknüpften Code: mp4Vid.setAttribute ('src', "/pathTo/newVideo.mp4");
Velojet
3

Ich komme damit, um die Videoquelle dynamisch zu ändern. "canplay" -Ereignis wird in Firefox manchmal nicht ausgelöst, daher habe ich "geladene Metadaten" hinzugefügt. Außerdem pausiere ich das vorherige Video, wenn es eines gibt ...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};
Molokoloco
quelle
Das Update, das definitiv für mich funktioniert hat, Firefox behandelt weder canplaynoch Eigentum canplaythroughund lodedmetadatamuss den Video-Handlern hinzugefügt (und später entfernt) werden :-(
Lord of Freaks
3

Das ist meine Lösung:

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>
IT-Vlogs
quelle
2

Die Verwendung der <source />Tags erwies sich speziell in Chrome 14.0.835.202 als schwierig für mich, obwohl es in FireFox für mich gut funktioniert hat. (Dies könnte mein Mangel an Wissen sein, aber ich dachte, eine alternative Lösung könnte trotzdem nützlich sein.) Also habe ich nur ein <video />Tag verwendet und das src-Attribut direkt auf dem Video-Tag selbst festgelegt. DascanPlayVideo('<mime type>') Funktion wurde verwendet, um zu bestimmen, ob der bestimmte Browser das Eingangsvideo abspielen kann oder nicht. Das Folgende funktioniert in FireFox und Chrome.

Übrigens spielen sowohl FireFox als auch Chrome das "ogg" -Format, obwohl Chrome "webm" empfiehlt. Ich habe den Check für die Browserunterstützung von "ogg" nur an erster Stelle gestellt, weil in anderen Posts erwähnt wurde, dass FireFox zuerst die ogg-Quelle bevorzugt (dh <source src="..." type="video/ogg"/>). Aber ich habe nicht getestet (und bezweifle sehr), ob die Reihenfolge im Code überhaupt einen Unterschied macht, wenn ich das "src" auf dem Video-Tag setze.

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }
ItsAllABadJoke
quelle
2

Ich habe dies eine ganze Weile erforscht und ich versuche das Gleiche zu tun, also hoffe ich, dass dies jemand anderem hilft. Ich habe crossbrowsertesting.com verwendet und dies buchstäblich in fast jedem dem Menschen bekannten Browser getestet. Die Lösung, die ich derzeit habe, funktioniert in Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+ und Windows Phone 8.

Dynamisch wechselnde Quellen

Das dynamische Ändern des Videos ist sehr schwierig. Wenn Sie einen Flash-Fallback wünschen, müssen Sie das Video aus dem DOM / der Seite entfernen und erneut hinzufügen, damit Flash aktualisiert wird, da Flash keine dynamischen Aktualisierungen von Flash-Variablen erkennt. Wenn Sie JavaScript verwenden, um es dynamisch zu ändern, würde ich alle <source>Elemente vollständig entfernen und nur verwenden canPlayType, um das srcin JavaScript und breakoder returnnach dem ersten unterstützten Videotyp festzulegen, und vergessen Sie nicht, die Flash-Variable mp4 dynamisch zu aktualisieren. Einige Browser registrieren auch nicht, dass Sie die Quelle geändert haben, es sei denn, Sie rufen an video.load(). Ich glaube, das Problem mit .load()Ihnen kann durch einen ersten Anruf behoben werdenvideo.pause(). Das Entfernen und Hinzufügen von Videoelementen kann den Browser verlangsamen, da das entfernte Video weiterhin gepuffert wird . Es gibt jedoch eine Problemumgehung .

Browserübergreifende Unterstützung

Was den eigentlichen browserübergreifenden Teil betrifft, bin ich auch zu Video For Everybody gekommen . Ich habe bereits das MediaelementJS Wordpress-Plugin ausprobiert, das viel mehr Probleme verursachte als es löste. Ich vermute, die Probleme waren auf das Wordpress-Plug-In und nicht auf die eigentliche Bibliothek zurückzuführen. Ich versuche, etwas zu finden, das wenn möglich ohne JavaScript funktioniert. Bisher habe ich mir dieses einfache HTML ausgedacht:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

Wichtige Hinweise :

  • Am Ende wurde das Ei als erstes gesetzt, <source>da Mac OS Firefox den Versuch, das Video abzuspielen, beendet, wenn es als erstes auf einen MP4 stößt <source>.
  • Die richtigen MIME - Typen sind wichtige .ogv Dateien sein sollten video/ogg, nicht video/ogv
  • Wenn Sie HD-Video haben, ist Firefogg der beste Transcoder, den ich für OGG-Dateien in HD-Qualität gefunden habe
  • Die .iphone.mp4Datei ist für das iPhone 4+ vorgesehen, das nur MPEG-4-Videos mit H.264 Baseline 3-Video und AAC-Audio wiedergibt. Der beste Transcoder, den ich für dieses Format gefunden habe, ist Handbrake. Die Verwendung der Voreinstellung für iPhone und iPod Touch funktioniert auf dem iPhone 4+. Damit das iPhone 3GS funktioniert, müssen Sie die Voreinstellung für den iPod verwenden, die eine viel niedrigere Auflösung aufweist, als die ich hinzugefügt habe video.iphone3g.mp4.
  • In Zukunft können wir ein mediaAttribut für die <source>Elemente verwenden, um auf mobile Geräte mit Medienabfragen abzuzielen. Derzeit unterstützen die älteren Apple- und Android-Geräte dies jedoch nicht gut genug.

Bearbeiten :

  • Ich verwende immer noch Video für alle, aber jetzt habe ich FlowPlayer verwendet, um den Flash-Fallback zu steuern, der über eine fantastische JavaScript-API verfügt , mit der er gesteuert werden kann.
Alex W.
quelle
Dies scheint die Antwort auf die Frage "Wie spiele ich Video Cross Browser?" Zu sein. und nicht diese Frage: "Wie richte ich eine Wiedergabeliste für mein Video ein?".
Quentin
@Quentin Zunächst einmal, weil ich diese Frage über Google gefunden habe und OP sagte, er versuche, einen Videoplayer zu bauen, der überall funktioniert. Ich habe die Antwort aktualisiert, um auch seine dynamische Frage zu beantworten.
Alex W
2

Ich habe eine ähnliche Web-App und stehe überhaupt nicht vor solchen Problemen. Was ich mache ist so etwas:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

Wenn ich dann die Quellen ändern möchte, habe ich eine Funktion, die ungefähr so ​​funktioniert:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

Ich mache das, damit der Benutzer eine Wiedergabeliste durchgehen kann, aber Sie können nach userAgent suchen und dann die entsprechende Datei auf diese Weise laden. Ich habe versucht, mehrere Quell-Tags zu verwenden, wie es alle im Internet vorgeschlagen haben, aber ich fand es viel sauberer und zuverlässiger, das src-Attribut eines einzelnen Quell-Tags zu manipulieren. Der obige Code wurde aus dem Speicher geschrieben, daher habe ich möglicherweise einige der Details beschönigt, aber die allgemeine Idee besteht darin, das src-Attribut des Quell-Tags gegebenenfalls mithilfe von Javascript dynamisch zu ändern.

aamiri
quelle
1

Versuchen Sie, die OGG-Quelle nach oben zu verschieben. Ich habe bemerkt, dass Firefox manchmal verwirrt ist und den Spieler stoppt, wenn derjenige, den er spielen möchte, OGG, nicht der Erste ist.

Einen Versuch wert.

Ian Devlin
quelle
1

Ein anderer Weg, den Sie in Jquery tun können.

HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

Jquery

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });
青木 Japan
quelle
0

Verwenden von JavaScript und jQuery:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>
pbies
quelle