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

[Old Boy]

Hat er doch... !

Aber ab und an ist es eben mal vorteilhaft, wenn man mal schnell was "EIN" oder "AUS" schalten kann, ohne gleich ein neues Template auszusuchen. Für "DUMMEN Redakteure" ist das ebenfalls leichter... und für "senile Rentner" sowieso

Darum liebe ich den CP Bilder Spezial ja auch so, da kann man mit den EFFECT_XX so wunderbar zaubern.
Schade, dass diese Möglichkeit nicht in allen PCs vorhanden ist!

KOMMANDO ZURÜCK
Fehler von mir... in dem Wust von experimentier-Templates war ich nun selber durcheinander gekommen.
Mein momentaner Vorschlag war doch zu spontan... aber das kriegen wir irgendwie hin.
Wohl doch nur mit integrierter CP-ID möglich

[update]

haqb ich versucht, (mit 2 Templates), aber wenn bei einem auskommentiert, ist fullscreen überall futsch.
Auch
T1: iframe.setAttribute("allowfullscreen", "true");
T2: iframe.setAttribute("allowfullscreen", "false");
geht nicht

BTW: Ich schraube hier mit CP HTML...

[update]

ich habs

[update]

So, jetzt nochmal zu

Dann Script generisch..... Außerdem kann man vieles von dem, was das JS nachträglich tut, bereits in HTMl vorbereiten lassen

Push? Direction?

[Oliver Georgi]

Null CP ID erforderlich

[Old Boy]

Wenn man Profi ist, ist es ja natürlich leicht

Aber wir Stümper fummeln uns eben etwas zurecht, solange bis es funktioniert... ohne Rücksicht auf Verluste

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[HTML]
<!-- http://bootstrap.pepes-sandbox.de/video ... nsive.html -->
<!-- CSS:
.youtube-container { display:block; margin:15px auto 20px; 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("template/xtra-Templates/startVideo.png") no-repeat; }
#youtube-iframe { width:100%; height:100%; position:absolute; top:0; left:0; }
-->
<div class="youtube-container">
<div class="youtube-player player-{CPID}" data-id="{HTML}"></div>
</div>
<script>
(function() {
var v = document.getElementsByClassName("youtube-player player-{CPID}");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = videoThumb(v[n].dataset.id);
p.onclick = videoIframe;
v[n].appendChild(p);
}
})();
function videoThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function videoIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=1");
iframe.setAttribute("frameborder", "0");
[SUBTITLE]//[/SUBTITLE]iframe.setAttribute("allowfullscreen", "true"); // kommentieren, wenn KEINE Fullscreen gewuenscht
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
[/HTML]

Ich weiss, nicht schön... funktioniert aber, solange ich nix Besseres habe
http://bootstrap.pepes-sandbox.de/video ... nsive.html

Meine nobelpreis-würdigen Fähigkeiten liegen eben auf eine ganz anderen Gebiet

Ich warte dann mal besser auf updates Update ... oder den genialen Streich von Oliver
Aber eigentlich ... brauch ich das selber GARNICHT

[update]

mein update: Hab's nahezu identisch, allerdings mit zwei Templates, video und audio:

Code: Select all

		<div class="youtube-player a{CPID} video" id="{HTML}" data-id="{HTML}"></div>

Code: Select all

		<div class="youtube-player a{CPID} audio" id="{HTML}" data-id="{HTML}"></div>

Das CSS dazu:

Code: Select all

...
.youtube-player.audio {
	padding-bottom: 90px;
}
.youtube-player.video {
	padding-bottom: 56.25%;
}
.youtube-player {
	display: block;
	width: 100%; /* assuming that the video has a 16:9 ratio */
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	cursor: hand;
	cursor: pointer;
	display: block;
}
...

[Oliver Georgi]

So geht es mit dem geringsten Aufwand, 15 Minuten gebraucht. Exemplarisch mit Bootstrap und FontAwesome.

Code: Select all

[HTML]
	[TITLE]<h3>{TITLE}</h3>[/TITLE]
	[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
	<div class="embed-responsive embed-responsive-16by9 video-container" data-videoid="{HTML}">
		<img class="video-thumb" src="//i.ytimg.com/vi/{HTML}/hqdefault.jpg"><span class="video-play fa fa-play-circle"></span>
	</div>
<!-- CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css -->
<!-- CSS: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css -->
<!-- CSS: .video-play {
	height: 72px;
	width: 72px;
	left: 50%;
	top: 50%;
	margin-left: -36px;
	margin-top: -36px;
	position: absolute;
	text-align: center;
	line-height: 72px;
	font-size: 70px;
	color: #fff;
}
.video-play:hover {
	color: yellow;
	cursor: pointer;
}
-->
<!-- JS:
$(function(){
	$('.video-play').one('touchstart click', function() {
		var $videoContainer = $(this).parent();
		var $videoId = $.trim($videoContainer.data('videoid'));
		var $children = $videoContainer.children();
		// Check YouTube what each parameter here is for
		$videoContainer.append('<iframe src="//www.youtube.com/embed/'+$videoId+'?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0" class="embed-responsive-item" frameborder="0" />');
		$children.remove(); // remove the helpers
	});
});
-->
[/HTML]

Sicher noch CSS optimieren usw. Müsste man auch noch mal schauen, dass das Bild analog des Videos funktioniert. Aber Marginalien.

[update]

Hab's ausprobiert. Funktioniert "natürlich". (Desktop)
Aber auf dem iföön lädt es sich zu Tode, als ob das ganze Video beim Seitenaufruf erst mal geholt werden würde.
Irgendwann geht es dann.

[Oliver Georgi]

iPhone und iPad kann ich nicht bestätigen (alles Simulator). Läuft hier mit 8.4 und 9 schnell und so wie es soll. Bei Seitenaufruf wird überhaupt kein Video geholt, nur das Vorschaubild.

[Old Boy]

Ach wie hilfreich sind solche kleinen/mittleren Anstösse in Richtung Ziel für Menschen sind, die sich in 90% ihrer Zeit nur noch mit den Enten im Park unterhalten ... und die sind erst BLÖD

Dann werde ich die Lösung natürlich auch noch probieren... DANKE!





Vielleicht belege ich ja doch noch mal einen Programmierkurs für Dummys, jetzt, wo die UNI im Ort bald eröffnet wird

[update]

Definitiv ist das so auf meinem iföön (Original Apfel). Habe extra das andere video ausgeschaltet, um Kollisionen zu vermeiden.

[Oliver Georgi]

Definitiv ist das so auf meinem iföön (Original Apfel). Habe extra das andere video ausgeschaltet, um Kollisionen zu vermeiden.

du wirst noch immer ein eher grundsätzliches Problem mit Deiner Seite haben.

[update]

du wirst noch immer ein eher grundsätzliches Problem mit Deiner Seite haben.

Wenn ich die oben gepostete Version (aus Deinem ersten Vorschlag) nehme, geht das wie geschmiert... Nur mit Deiner zuletzt geposteten Variante nicht. Da scheint das Föön erstmal das Video zu laden. Hmmmm

[Oliver Georgi]

Wie ich sagte, Deine OnePager ist komplett overloaded. Chaos pur (denn er wußte nicht, was er da kombiniert). Meiner Meinung nach lauschen da zu viele Events, das killt Dein Gurkenphone.

Alleine da http://mykketmorton.com/template/lib/my ... nctions.js#

Das sollte reichen:

Code: Select all

$(function(){
	// main anchor sroll
	$('#bs-navbar-collapse-main a, .inner-onepage-nav a, .teaser a').on('click',function(event){
		event.preventDefault();
		var $anchor = $(this).attr('href').replace('.html','');
		$('html, body').stop().animate({
			scrollTop: $("#" + $anchor).offset().top - 50
		}, 800,'easeInOutExpo');
	});
	// link out of onpager
	$('.dropdown-menu a').unbind('click');
});