audio/video player streaming probleme - wie geht's richtig?

[update]

http://www.labnol.org/internet/light-yo ... eds/27941/

Das klingt so, als hätte ich schon immer danach gesucht. Da bastle ich mir gleich mal ein Template...
Funkt das auch in den verschiedenen Browsern und Systemen (zB el Capitano usw.?)

[Oliver Georgi]

Kann man auch mit jQuery umbauen. Ist easy und ja, system-/browserübergreifend.

[update]

Template ist "fertig".
Wenn ich das JS in den HEAD-Bereich schicke, geht's nicht, wenn es im BODY steht, schon
Outofthebox macht das Script kein fullscreen, aber ein kleiner Eintrag in die setAttribute tut es dann.
Hier mal zur Ansicht:

Code: Select all

<div class="col-md-12">
	[TITLE]<h3>{TITLE}</h3>[/TITLE]
	[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
	<div class="youtube-container">
		<div class="youtube-player" data-id="[HTML]{HTML}[/HTML]"></div>
	</div>
</div>

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&rel=0&autohide=1&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=1");
    iframe.setAttribute("frameborder", "0");
     iframe.setAttribute("allowfullscreen", "true"); /*added fullscreen*/
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>
<!-- CSS:
.youtube-container {
	display: block;
	margin: 20px auto;
	width: 100%;
	max-width: 100%;
}
.youtube-player {
	display: block;
	width: 100%; /* assuming that the video has a 16:9 ratio */
	padding-bottom: 56.25%;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: hand;
	cursor: pointer;
	display: block;
}
img.youtube-thumb {
	bottom: 0;
	display: block;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	height: auto
}
div.play-button {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
-->

Content Part HTML, nur die video-ID eintragen...

[Oliver Georgi]

Daran denken, dass HTML gefüllt sein muss, also um alles wrappen. Dann Script generisch und daran denken, dass das n-mal auftreten kann usw. Außerdem kann man vieles von dem, was das JS nachträglich tut, bereits in HTMl vorbereiten lassen. Nicht zu Ende gedacht.

[update]

daran denken, dass das n-mal auftreten kann

Habe ich getestet, das geht.

was das JS nachträglich tut, bereits in HTMl vorbereiten

Ich probier's mal

Daran denken, dass HTML gefüllt sein muss, also um alles wrappen

Mach ich!

[Old Boy]

Jau, hier läuft es ebenfalls, da hatten wir unabhängig voneinander wohl die gleichen Experimente gemacht ...
das fehlende FullScreen Feature hatte ich allerdings noch garnicht vermisst, bis ich deinen Kommentar gelesen habe.
Nun hab ich schnell integriert und alles läuft zufriedenstellend.

Wenn wir unseren OG nicht hätten, den unermüdlichen Retter der Witwen, Waisen ... und Fulltime-Rentner

[update]

Oliver Georgi wrote:
was das JS nachträglich tut, bereits in HTMl vorbereiten
Ich probier's mal

ok, gibt's einen kleinen Tip?

Ganz nebenbei: Per CSS habe ich jetzt einen prima Audioplayer über youtube (obwohl ich das noch mit soundcloud angehen werde).

[Old Boy]

Allerdings...

Bei den Audios könntest du ja auf den Vollbildmodus eigentlich verzichten

[update]

Oliver Georgi wrote:
daran denken, dass das n-mal auftreten kann
Habe ich getestet, das geht.

Geht also doch nicht so ganz. Das zB meinte Oliver wahrscheinlich. Vielleicht hast Du ja eine Idee...

[Old Boy]

Was genau "geht" denn nicht?

Ich denke, da muss die ContentPart-ID im Template beigefügt und das Script entsprechend angepasst werden.

[update]

Was genau "geht" denn nicht?

zB für jeden Player getrennt fullscreen on oder off zu sagen. Das Abspielen geht schon.

[Old Boy]

Ja, dann brauchst du verschieden Templates, oder nutzt CP Titel/Subtitel für die Schaltung der gewünschten Funktion

[update]

ich habe zwei verschiedene Templates

[Old Boy]

Sieh mal hier: http://bootstrap.pepes-sandbox.de/video ... nsive.html

Das ist mit einem Template gemacht!

[SUBTITLE]//[/SUBTITLE]iframe.setAttribute("allowfullscreen", "true"); // kommentieren, wenn KEINE Fullscreen gewuenscht

[Oliver Georgi]

Ähm, wie wäre es mit einem 2. Template?