phpwcms Support Forum

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

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...

ich habs

So, jetzt nochmal zu

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

Push? Direction?

Null CP ID erforderlich

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]


<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

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;
}
...

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.

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.

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.

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

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

update wrote: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.

Oliver Georgi wrote: 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

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');
});

phpwcms Support Forum

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

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt

Re: audio/video player streaming probleme - wie geht's richt