Spielen volle HTML5-video und-dann-Schleife einen Abschnitt davon

Ich versuche zu spielen, eine 8.6 zweiten video einmal komplett, und dann Schleife einen kleinen Abschnitt des Videos unendlich, um die illusion eines nie enden wollenden video. So weit ich geschaut habe, in der media fragments URI, und die beendet - Ereignis des video. Einstellung der currentTime-Attribut in das ended-Ereignis-listener funktioniert, aber es macht das video zu "blinken".

Zur Zeit bin ich mit einem timeupdate event-listener, um die Zeit zu ändern, wenn das video nähert sich dem Ende [unten abgebildet]

elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
    elem.currentTime = 5;
    elem.play();
}
}, false);

JSFiddle hier

Dies funktioniert auch, aber das video pausiert sichtbar vor dem Neustart in 5 Sekunden. Gibt es eine weichere Art zu spielen das video einmal an und dann looping ein segment davon?

InformationsquelleAutor WeNeigh | 2014-01-21

2

Versuchen Sie die folgende, auf "rewind" so bald wie es endet:
```
vidElem.addEventListener("ended", function () {
        vidElem.currentTime = 2.5;
        vidElem.play();
}, false);
```
Aktualisiert fiddle: http://jsfiddle.net/Lt4n7/1/
- Danke, aber ich bereits versucht, mit dem ended-Ereignis-listener. Vielleicht war das das falsche Beispiel-video zu verwenden, (Es hat seine eigenen Pausen), aber es gibt eine deutliche pause, bevor das video verschiebt sich um 2,5 Sekunden. Ich bin auf der Suche, um die Schleife nahtlos.
- Teilen Sie es in zwei videos
- Du meinst ein full-length video und ein video von der bit ich möchte die Schleife? Das scheint verschwenderisch! Es ist habe ein HTML5+JS Weg! 🙂
- einfach das video bis zu dem Teil, den Sie Loopen möchten. Wenn Sie eine Geige mit einem loopfähig Beispiel, dass würd auch helfen, eine Menge
- Funktionierte großartig für mich. Wickelte es in ein jQuery-bereit, und fertig. $(function(){ var vidElem = $("#bgvid>VIDEO")[0]; vidElem.addEventListener("ended", function () { vidElem.currentTime = 21; vidElem.play(); }, false); });
- FYI, das funktioniert nicht gut mit ein paar videos, denn manchmal sind die browser einfach nicht ändern können, die currentTime und sofort spielen, so müssen Sie eine Verzögerung zwischen jeder Schleife. Mit zwei videos (leider) zuverlässiger.
InformationsquelleAutor Max
2

Ich nur zu tun hatte mit dem gleichen problem, und bemerkt die gleichen Probleme mit flackern. Hier war meine Lösung:
- Bekommen 2 videos (oder Gruppen von videos), eine für die nicht-geloopte Bereich, der andere für den geloopten Abschnitt
- Erstellen 2 video-Elemente
- legen Sie die looping-element 'display:none'
Dann nur erfassen das ended-Ereignis-und swap-anzeigen status (Beispiel jquery verwendet, aber man könnte 'Stil.display="none/block", " nur als leicht:
```
VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);

function videoLooper()
{
    VideoPlayer2.play();
    $(VideoPlayer2).show();
    $(VideoPlayer1).hide();
}
```
InformationsquelleAutor Random

Dein code ist in Ordnung, das problem mit der MP4 Datei! Versuchen Sie es mit einem viel kleineren video wie dieses ( http://www.w3schools.com/tags/movie.mp4 ), um zu bestätigen, dass das Problem nicht mit deinem code.

Also, wie können Sie das gleiche Ergebnis erzielen, aber mit großen Video-Dateien?
Sie müssen zwei video-Dateien:

video1 ist die Haupt-video -
video2 ist die looping-video

Denken Sie daran: HTML5-video-hat keine Probleme beim Abspielen und Loopen große video-Dateien, so werden wir diese Methode verwenden, um das Abspielen der videos.

Unten im Beispiel spielen wir das erste video und wenn es fertig ist werden wir eine Funktion ausführen zu verbergen video1 und dann show/Spiel-video2. (Video 2 ist schon in Schleife)

Vergessen Sie nicht, laden Sie JQuery in Ihrem Kopf sonst wird das nicht funktionieren.

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object data="movie.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="movie.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<video id="video2" width="1080" height="568" poster="loop.png" loop>
  <source src="loop.webm" type="video/webm">
  <source src="loop.ogg" type="video/ogg">
  <source src="loop.mp4" type="video/mp4">
  <object data="loop.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="loop.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<script> 
$( "#video2" ).hide();
function run(){
   $( "#video1" ).hide();
    $( "#video2" ).show();
    document.getElementById("video2").play();
   };
</script>

InformationsquelleAutor Tremours

0

Können Sie nicht, lösen Sie dieses Problem in javascript. Die Verzögerung, die Sie sehen, hängt von der video-Kompression und der hardware.

Anfangen zu spielen in einer Zeit, die nicht 0 ist, ist der video-decoder hat, zurück zu gehen und finden eine Schlüssel-frame und erstellen Sie das aktuelle Bild durch das Lesen alles, was zwischen dem letzten Keyframe und der von Ihnen gewählten Zeit.

Ich bin nicht ein Experte im video-Kompression, aber vielleicht gibt es einen Weg zu wählen, diese key-frames und legen Sie Sie genau wo Sie Sie brauchen. Ich glaube nicht, es wird einfach und glatt, aber.

Wenn Sie suchen für eine einfachere Lösung, verwenden Sie @Random ist, aber es verwendet zwei <video> tags zu arbeiten, um dieses limit.

InformationsquelleAutor bfred.it

JS:

var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function() {
  alert('end');
  if (iterations <
    2) {
    this.currentTime = 0;
    this.play();
    iterations++;
    document.getElementById('iteration').innerText = i terations;
  } else {
    flag = t rue;
    this.play();
  }
}, false);
myVideo.addEventListener('timeupdate', function() {
  if (flag == t rue) {
    console.log(this.currentTime);
    if (this.currentTime >
      5.5) {
      console.log(this.currentTime);
      this.pause();
    }
  }
}, false);

HTML:

<div>Iteration: <span id="iteration"></span></div>

<video id="video-background" autoplay="" muted="" controls>
            <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
    </video>
<div>Iteration: <span id="iteration"></span></div>

//Bitte beachten Sie, dass die loop-Attribut sollte nicht dort sein, im video-element, um für die "beendet" - Ereignis funktioniert auch im ie und firefox

Bitte überprüfen Sie hier die Referenz jsfiddle.net/dxpkumar/fuqmfde8
Während dieses code-snippet kann die richtige Lösung, einschließlich einer Erklärung die wirklich hilft, zu verbessern, die Qualität Ihrer post. Denken Sie daran, dass Sie die Beantwortung für Leser in der Zukunft, und die Menschen vielleicht nicht wissen, die Gründe hinter dem code-Vorschlag. Bitte auch die add link die Antwort und nicht als Kommentar.

InformationsquelleAutor dxpkumar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.