videojs html5 playlist-setup

Möchte ich umsetzen videojs-player auf einer sharepoint-Website. Ich war in der Lage, um den setup-video-player mit einem statischen video-Quelle für den Spieler. Jetzt möchte ich eine Liste von video-urls auf der Seite der Spieler, die Benutzer klicken können, auf und laden Sie das video auf den gleichen Spieler. Etwas in der Nähe hier gemacht wurde: http://jsfiddle.net/Barzi/Jzs6B/9/ aber ohne Verwendung von videojs.

Wie kann ich etwas ähnliches tun mit videojs Umsetzung? http://jsfiddle.net/6nJ4z/

<div id="html5videoplayer" style="font-family: Arial Unicode MS;">
  <video id="videoarea" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}"> 
    <!--<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />-->
  </video>
</div>

<ul id="playlist">
    <li><a href="http://html5videoformatconverter.com/data/images/happyfit2.mp4">Happy Fit</a></li>
    <li><a href="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</a></li>      
    <li><a href="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</a></li>
</ul>

InformationsquelleAutor Athapali | 2013-11-26

  1. 1

    HTML

    <div id="html5videoplayer" style="font-family: Arial Unicode MS;">
  <video id="videoarea" class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
  </video>
</div>
<ul id="playlist">
  <li data-loc="http://video-js.zencoder.com/oceans-clip.mp4" data-type="video/mp4">Oceans</li>
  <li data-loc="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-type="video/mp4">Happy Feet</li>
  <li data-loc="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" data-type="video/mp4">Sintel</li>
  <li data-loc="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm" data-type="video/webm">Big Buck Bunny</li>
</ul>

    CSS

    #playlist li {
    color: blue;
    text-decoration: underline;
}
#playlist li:hover {
    color: black;
    cursor: pointer;
}

    Javascript

    function doPlayList(listID, playerID) {
    var player = document.getElementById(playerID);
    var video = player.getElementsByTagName("video")[0];
    var s;

    video.src = null;
    video.setAttribute("data-count", 0);
    video.addEventListener("ended", function (e) {
        e.preventDefault();
        s = this.getElementsByTagName("source")[0];
        var c = parseInt(this.getAttribute("data-count")) + 1;
        var item = document.getElementById("video" + c);
        if (item === null) {
            item = document.getElementById("video0");
            c = 0;
        }
        s.src = item.getAttribute("data-loc");
        s.type = item.getAttribute("data-type");
        this.setAttribute("data-count", c);
        this.setAttribute("autoplay", "autoplay");
        this.load();
        this.play();
    });

    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        item.id = "video" + i;
        item.addEventListener("click", function (e) {
            e.preventDefault();
            var p = document.getElementById("html5videoplayer");
            var v = p.getElementsByTagName("video")[0];
            var s = p.getElementsByTagName("source")[0];
            s.src = this.getAttribute("data-loc");
            s.setAttribute("type", this.getAttribute("data-type"));
            v.setAttribute("data-count", this.id.substr(5));
            v.setAttribute("autoplay", "autoplay");
            v.load();
            v.play();
        });
    }
}
document.onready = doPlayList("playlist", "html5videoplayer");

    Versuchen Sie es in ein jsFiddle.

    Offensichtlich der Unterschied hier kein jQuery erforderlich. Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.

    EDIT: Änderte den code so verwendet er das source element und data-* Attribute. Hoffe, das hilft.

    Ich wirklich schätzen Ihre Zeit. Es funktioniert gut für Chrome und FF, aber meine sharepoint-Websites sind beschränkt auf IE8. Der Grund, warum ich verwendet videojs war aus diesem Grund. ich kann spielen, ein video wie dieses: <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="" data-setup="{}"> <source src="video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> </video> Aber mit der playlist fragt er mich herunterladen, anstatt Sie zu spielen, es in den player und ich denke, seine probly, weil ie8 ist nicht zu verstehen, einige der Attribute??
    Aktualisieren Sie Ihre ursprüngliche Frage zu beachten, dass der IE8-Beschränkung. Ich werde schauen, um zu sehen, was der IE8 muss.

    InformationsquelleAutor Ally

  2. 1

    Können Sie die video-in-video-tag mit javascript. Sie können entfernen Sie die href und verwenden Sie das element mit onclick die Adresse von video, zum Beispiel:

        <div id="html5videoplayer" style="font-family: Arial Unicode MS;">
      <video id="videoarea" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}"> 
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
      </video>
    </div>

    <ul id="playlist">
        <li><a href="#" onclick="PlayVideo('happyfit2.mp4')">Happy Fit 2</a></li>
        <li><a href="#" onclick="PlayVideo('happyfit3.mp4')">Happy Fit 3</a></li>
        <li><a href="#" onclick="PlayVideo('happyfit4.mp4')">Happy Fit 4</a></li>
    </ul>

<script type="text/javascript">
    var PlayVideo = function(videoSrc){
        $("#html5videoplayer").remove("source");
        var htmlVideo = '<source type="video/mp4" src="'+ videoSrc +'" />';
        $("#html5videoplayer").html(htmlVideo);
    }
</script>
    Haben Sie versucht, diese in ein fiddle? Ich bin nicht sicher, es wird immer funktionieren. Nicht alle videos sind vom Typ video/mp4 da war ich immer Fehler, wenn ich versuchte, etwas ähnliches, da war die Rückkehr application/octet.
    Es ist ein einfaches Beispiel, die Entwickler anpassen müssen, um zu deinem Ziel. Ich bin mir nicht getestet mit diesem code, aber ich habe einen ähnlichen code in meiner Anwendung.

    InformationsquelleAutor Rafael Marcos

  3. 1

    Fand dieses github-Projekt, funktioniert wirklich gut!. Haben Sie einen Blick auf es.
    https://github.com/cfx/videojs-playlist

    InformationsquelleAutor Shankar Prakash G

Schreibe einen Kommentar