Youtube Java Script mit automatischen Reload nach Videolänge

radiotracker · 26 März 2013

Hi Leute,

ich habe eine besondere Bitte:
Ich bräuchte ein Java Script das den iframe mit dem Youtube Video automatisch neu läd. Dies soll aber erst passieren wenn das Video zu ende ist.
Also zB. 1. Video: Länge 3.45min = iFrame reload nach 3.45min =>
2. Video: Länge 4.25min = iFrame reload nach 3.45min

Bin leider nicht weit gekommen:
===============================================================
<html>
<head>
</head>
<body>
<center>
<div align="center">
<script type="text/javascript">
var video=new Array()
video[0] = "6Lh7Zg8WXwU"; // Video 0
video[1] = "y10OdAZOBQ8"; // Video 1
video[2] = "uc_HPel98wg"; // Video 2
video[3] = "Jrd25gjyDhE"; // Video 3

var breite = "768"; // Video Breite
var hoehe = "462"; // Video Hoehe

var V = video.length;
var showvideo=Math.round(Math.random()*(V-1));
document.write('<iframe width="'+breite+'" height="'+hoehe+'" src="http://www.youtube.com/embed/'+video[showvideo]+'?autoplay=1" frameborder="0" allowfullscreen></iframe>');

</script>
</body>
</html>
===============================================================

Ich hoffe ihr könnt mir helfen :)

Selbst wenn ich die Zeit jedesmal eingeben muss wäre das egal. Nur muss die eingegebene Zeit dann mit dem Video gekoppelt sein. Bin HTML;CSS Anfänger, habe bis jetzt nur erfolgreich mit Wordpress gearbeitet :)

threadi · 26 März 2013

Solange der Videoplayer kein Signal sendet "Video ist zu ende" kann man das Ende des Videos nicht ermitteln. Das kann man nur mittels der Youtube API ermitteln. Ein Beispiel inkl. Link zur Dokumentation ist z.B. hier zu finden:
javascript - How to detect when a youtube video finishes playing? - Stack Overflow

Tronjer · 26 März 2013

Das Beste ist natürlich immer, die vorhandenen Methoden einer API zu verwenden.

Es ginge aber theoretisch auch nach oberem Beispiel statisch, sofern man sich neben der ID des Videos auch dessen Dauer notiert und beides zusammen in einem Objekt speichert. Da JavaScript in Millisekunden rechnet wäre die Kalkulation für einen 5 min. langen Titel: 5 x 60 x 1000 = 300000.

Code:

var videos = {
    300000 : [COLOR=#3E3E3E]"6Lh7Zg8WXwU"[/COLOR]
}

Der iFrame müsste dann mit setTimeout() geladen werden, wobei der Value des Objekts dem Videotitel und der Key dem Delay entspricht.

threadi · 26 März 2013

Das setze aber voraus, dass der Zuschauer nicht auf "Pause" drückt ;)

radiotracker · 26 März 2013

Hey vielen Dank wäre eine gute Möglichkeit nur leider weiß ich nicht wo das jetzt hin muss

kannst du das einmal in meinen Auszug integrieren? Das würde mir helfen und mein Problem lösen :)

Tronjer · 26 März 2013

threadi hat Recht. Ich hatte nicht berücksichtigt, dass der User die Videos auch pausieren kann. Damit wäre mein Ansatz hinfällig.

radiotracker · 26 März 2013

Erstmal bin ich ehrlich gesagt froh wenn es so klappt

Hab schon paar Probleme gelöst mit so rumwurschteln.
Ich würde es gerne einfach erstmal damit probieren

dann komme ich etwas vorran.

Also eine der beiden Methoden würde ich erstmal gerne nehmen damit es ohne Pause drücken läuft.
Nur wie würde das eingebunden werden? Weiß nicht wo das hin muss. kann einer von euch das in meinen
Code einfügen damit ich sehe wie es sein muss? Dafür wäre ich euch echt dankbar.

threadi · 26 März 2013

Dir steht weiterhin die Möglichkeit der Youtube API offen.

radiotracker · 27 März 2013

OK nur wie kann ich statt dem alert"done" denn iframe neu laden, oder die komplette Seite einfach neu.
Zudem muss das Zufallsprinzip und mehrere Videos integriert werden, das Script bezieht sich ja nur auf ein Video. Mein Schul-HTML;CSS ist nicht mehr so frisch. Aber bin fleißig am suchen und lernen.

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '6Lh7Zg8WXwU',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('Random Again');
if (alert('Random Again') )
{ window.location.reload(true); }
}
}

</script>

klappt aber auch nicht.

Tronjer · 27 März 2013

radiotracker schrieb:
OK nur wie kann ich statt dem alert"done" denn iframe neu laden, oder die komplette Seite einfach neu.
Zudem muss das Zufallsprinzip und mehrere Videos integriert werden, das Script bezieht sich ja nur auf ein Video. Mein Schul-HTML;CSS ist nicht mehr so frisch. Aber bin fleißig am suchen und lernen.

Das Script erzeugt ein Widget aus der übergebenen ID. Da der Refresh des existierenden iFrames nicht möglich ist, muss das Div nach Abspielen eines Videos aus dem DOM gelöscht und neu erzeugt werden.

Macht dann € 50,- für eine Arbeitsstunde.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Random Youtube Video</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div id="video"></div>

    <script src="http://www.youtube.com/player_api"></script>
    <script>
        var player,
            width = 768,
            height = 462,
            videoContainer = '<div id="video"></div>',
            videoStreams = ['6Lh7Zg8WXwU', 'y10OdAZOBQ8', 'uc_HPel98wg', 'Jrd25gjyDhE'];
    
        // get random video from array
        Array.prototype.shuffle = function () {
            for (var i = this.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var tmp = this[i];
                this[i] = this[j];
                this[j] = tmp;
            }
    
            return this;
        };
     
        function randomVideo() {
            var stream = videoStreams.shuffle();
            return stream[0];
        };
    
        // create youtube player
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('video', {
              height: height,
              width: width,
              videoId: randomVideo(),
              events: {
                'onStateChange': onPlayerStateChange
              }
            });
        };
    
        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {            
                $('#video').remove();
                $('body').prepend(videoContainer);
                onYouTubePlayerAPIReady();
            }
        };
    </script>
</body>
</html>

radiotracker · 27 März 2013

Oo super :) Vielen vielen Dank.
Hab es eben so übernommen aber es spielt nur das Video und dann ist ende.
Habe es aber 1 zu 1 so übernommen.

Und sollte es funktionieren mit quasi einem automatischen reload, das danach das nächste Video automatisch anfängt hast du mir so geholfen, dass du mir
gerne dein paypalkonto zusenden darfst für einen Obulus ;) Ich bin zwar noch Schüler aber gebe gerne was ab.

radiotracker · 27 März 2013

Sehe ich das richtig das im Grunde genommen bei //when video ends jetzt:

alert('Random Again');
if(alert('Random Again') )
{ window.location.reload(true); } }

noch eingebunden werden muss.

radiotracker · 27 März 2013

Habs raus habe einfach:

// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
document.location.reload(true);
}
};
</script>

ist zwar etwas rumgewurschtelt

aber egal

radiotracker · 27 März 2013

Jetzt habe ich jedoch noch das Problem, dass autoplay fehlt und die Videoqualität auf hd720 soll.
Dann ist es perfekt!

Tronjer · 27 März 2013

radiotracker schrieb:
Oo super :) Vielen vielen Dank.
Hab es eben so übernommen aber es spielt nur das Video und dann ist ende.
Habe es aber 1 zu 1 so übernommen.

Also bei mir hat sich nach dem Abspielen eines Titels der nächste geladen. Ich habe es aber nochmal umgeschrieben. Das Script generiert beim Laden der Seite eine random Playlist aus den Elementen im Array, startet automatisch mit dem ersten Video und spielt dann alle Titel der Liste in HD Quality ab. Ist die Liste abgearbeitet, wird eine neue Zufallsliste erstellt und an den Videoplayer übergeben. Den Refresh des Shuffle hatte ich beim ersten Script nicht berücksichtigt.

Willst du diese Endlosschleife nicht, könnte die if-Abfrage in der Funktion randomVideo() mit return beendet und eine entsprechende Anpassung bei onPlayerStateChange() vorgenommen werden. Das musst du dann aber selber machen. Ganz ohne Eigenleistung geht es nicht.

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Random Youtube Video</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="video"></div>

	<script src="http://www.youtube.com/player_api"></script>
	<script>
	    var player,
	    	playedVideos = [],
	    	playList = [],
    		currentVideo,
	    	width = 768,
	    	height = 462,
	    	videoContainer = '<div id="video"></div>',
	    	videoStreams = ['6Lh7Zg8WXwU', 'y10OdAZOBQ8', 'uc_HPel98wg', 'Jrd25gjyDhE'];
	
	    Array.prototype.shuffle = function () {
	        for (var i = this.length - 1; i > 0; i--) {
	            var j = Math.floor(Math.random() * (i + 1));
	            var tmp = this[i];
	            this[i] = this[j];
	            this[j] = tmp;
	        }
	
	        return this;
	    };

	    videoStreams.shuffle();
	    playList = videoStreams.slice();

	    function randomVideo() {
	    	if (playedVideos.length == videoStreams.length) {
	    	    playedVideos = [];
	    	    videoStreams.shuffle();
	    	    playList = videoStreams.slice();
		 }

	    	currentVideo = playList[0];
	    	playedVideos.push(playList.shift());
	    	return currentVideo;
	    };

	    function onYouTubePlayerAPIReady() {
	        player = new YT.Player('video', {
	          height: height,
	          width: width,
	          videoId: randomVideo(),
	          events: {
	            'onReady': onPlayerReady,
	            'onStateChange': onPlayerStateChange
	          }
	        });
	    };

	    function onPlayerReady(event) {
	    	event.target.playVideo();
	    	event.target.setPlaybackQuality('hd720');
	    }
	
	    function onPlayerStateChange(event) {        
	        if(event.data === 0) {            
	            $('#video').remove();
	            $('body').prepend(videoContainer);
	            onYouTubePlayerAPIReady();
	        }
	    };
	</script>
</body>
</html>

scbawik · 27 März 2013

@Tronjer
Betreibst du seit neuem gemeinnütziges Scripting? Ich meld' mich dann mal wenn ich selber keine Lust habe

Tronjer · 27 März 2013

scbawik schrieb:
@Tronjer
Betreibst du seit neuem gemeinnütziges Scripting? Ich meld' mich dann mal wenn ich selber keine Lust habe

Eigentlich nicht, aber ich habe gerade ein Projekt abgeschlossen und momentan nichts zu tun. Deshalb auch die Spielerei mit der WebCam.

radiotracker · 28 März 2013

Vielen Dank habe das Problem sogar schon selbst gelöst :-O
Das mit HD720 fehlte mir noch.

Man das macht voll spaß

sitze hier die ganze Zeit und designe und gucke das alles passt

Hoffe hast meine Nachricht bekommen tronjer ;)

Youtube Java Script mit automatischen Reload nach Videolänge

radiotracker

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

threadi

Moderator

radiotracker

Neues Mitglied

Tronjer

Senior HTML'ler

radiotracker

Neues Mitglied

threadi

Moderator

radiotracker

Neues Mitglied

Tronjer

Senior HTML'ler

radiotracker

Neues Mitglied

radiotracker

Neues Mitglied

radiotracker

Neues Mitglied

radiotracker

Neues Mitglied

Tronjer

Senior HTML'ler

scbawik

Senior HTML'ler

Tronjer

Senior HTML'ler

radiotracker

Neues Mitglied

Neueste Beiträge