• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Video abspielen auf Hauptseite

P

praNNkii

Neues Mitglied
Hallo ich bins mal wieder,
und zwar möchte ich das dieses Video
IPEx5 Intro auf die Hauptseite Ipex5 abgespielt wird.
Also das der Hintergrund dunkler wird und das Video dann in der Mitte automatisch abgespielt wird.
Wie bei der Bildvorschau, nur das anstatt Bilder ein Video kommt und das Automatisch.
Mit einem Klick an der Seite ist das Video dann weg.

Grüße
 
Zuletzt bearbeitet:
Gut, jetzt wissen wir, was du möchtest. Allerdings wissen wir nicht, wie deine Frage lautet und was du bisher versucht hast.
 
bdt600 schrieb:
Gut, jetzt wissen wir, was du möchtest. Allerdings wissen wir nicht, wie deine Frage lautet und was du bisher versucht hast.
Zum Vergrößern anklicken....

Meine Frage lautet ganz klar, wie mach ich das ? Ich habe noch nicht weiter versucht weil noch nichts ging.
Alles was ich finde sind Bilder die man anklickt und dann komm das Video.
Es soll aber automatisch abgespielt werden.
 
geht nicht, es passiert nichts. Genau so gemacht und sein Zeug da kopiert.
Nur beim installieren war kein "wpimages" Ordner.

HTML: 
<script type="text/javascript">
var nImgNum_pg_4 = 0;
wp_imgArray_pg_4 = new Array();
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/6453d7f7d421.jpg", 620, 380, "wpimages/6453d7f7d421t.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/f8b214fdd506.jpg", 620, 380, "wpimages/f8b214fdd506t.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/26989da7e5d.jpg", 620, 380, "wpimages/26989da7e5dt.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/e6143a99c84a.jpg", 620, 380, "wpimages/e6143a99c84at.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/8e26ec5c2be7.jpg", 620, 380, "wpimages/8e26ec5c2be7t.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/2ed4e884e818.jpg", 620, 380, "wpimages/2ed4e884e818t.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/b80a1b82b09c.jpg", 620, 380, "wpimages/b80a1b82b09ct.jpg", "");
wp_imgArray_pg_4[nImgNum_pg_4++] = new wp_galleryimage("wpimages/d29660f5e483.jpg", 620, 380, "wpimages/d29660f5e483t.jpg", "");
</script>
<link rel="stylesheet" href="wpscripts/nav_409style.css" type="text/css">
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="wpscripts/jsNavBarFuncs.js"></script>
<script type="text/javascript" src="wpscripts/wp_navbar_textmenu.js"></script>
<script type="text/javascript" src="nav_409tree.js"></script>
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Body-C
{
    font-family:"Verdana", sans-serif; font-size:16.0px; line-height:1.13em;
}
.Normal-C
{
    font-family:"Verdana", sans-serif; font-weight:700; font-size:15.0px; line-height:1.20em;
}
.Normal-C-C0
{
    font-family:"Arial", sans-serif; font-weight:700; color:#ff0000; font-size:19.0px; line-height:1.21em;
}
.Normal-C-C1
{
    font-family:"Arial", sans-serif; font-weight:700; color:#0000ff; font-size:19.0px; line-height:1.21em;
}
.Normal-C-C2
{
    font-family:"Verdana", sans-serif; font-weight:700; font-size:11.0px; line-height:1.18em;
}
.Normal-C-C3
{
    font-family:"Verdana", sans-serif; font-size:9.0px; line-height:1.33em;
}
.Normal-C-C4
{
    font-family:"Verdana", sans-serif; font-weight:700; font-size:9.0px; line-height:1.33em;
}
.Normal-C-C5
{
    font-family:"Verdana", sans-serif; font-size:12.0px; line-height:1.17em;
}
.Button1,.Button1:link,.Button1:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button1:focus{outline-style:none;}
.Button1 span,.Button1:link span,.Button1:visited span{color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:11px;width:142px;height:13px;font-size:10px;display:block;position:absolute;cursor:pointer;}
.Button1:hover span{color:#b3b3b3;}
.Button1:active span{color:#b3b3b3;}
</style>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
<script type="text/javascript">
$(document).ready(function() {

$('#wp_gallery_pg_4').wpgallery({
    imageArray: wp_imgArray_pg_4,
    nTotalImages: nImgNum_pg_4,
    nGalleryLeft: 40,
    nGalleryTop: 235,
    nGalleryWidth: 620,
    nGalleryHeight: 380,
    nImageDivLeft: 0,
    nImageDivTop: 0,
    nImageDivWidth: 620,
    nImageDivHeight: 380,
    nControlBarStyle: 3,
    nControlBarExternalTop: 10,
    bNavBarOnTop: false,
    bShowNavBar: false,
    nNavBarAlignment: 0,
    strNavBarColour: 'none',
    nNavBarOpacity: 1.0,
    nNavBarIconWidth: 24,
    nNavBarIconHeight: 24,
    bShowCaption: true,
    bCaptionCount: false,
    strCaptionColour: '#ffffff',
    nCaptionOpacity: 0.6,
    strCaptionTextColour: '#000000',
    nCaptionFontSize: 12,
    strCaptionFontType: 'Courier New,Arial,_sans',
    strCaptionAlign: 'center',
    strCaptionFontWeight: 'normal',
    bShowThumbnails: false,
    nThumbStyle: 1,
    nThumbPosition: 0,
    nThumbLeft: 30,
    nThumbTop: 275,
    nThumbOpacity: 0.5,
    nTotalThumbs: 5,
    nThumbSize: 40,
    nThumbSpacing: 10,
    bThumbBorder: true,
    strThumbBorderColour: '#000000',
    strThumbBorderHoverColour: '#ffffff',
    strThumbBorderActiveColour: '#ffffff',
    bShowThumbnailArrows: false,
    nThumbButtonSize: 24,
    nThumbButtonIndent: 50,
    nColBorderWidth: 2,
    nTransitionStyle: 2,
    nStaticTime: 2500,
    nTransitTime: 1000,
    bAutoplay: true,
    loadingButtonSize: 38,
    bPageCentred: true,
    nPageWidth: 920,
    nZIndex: 100,
    loadingButtonSrc: 'wpimages/wpgallery_loading_5.gif',
    blankSrc: 'wpscripts/blank.gif',
    rewindButtonSrc: 'wpimages/wpgallery_rewind_0.png',
    prevButtonSrc: 'wpimages/wpgallery_previous_0.png',
    playButtonSrc: 'wpimages/wpgallery_play_0.png',
    pauseButtonSrc: 'wpimages/wpgallery_pause_0.png',
    nextButtonSrc: 'wpimages/wpgallery_next_0.png',
    forwardButtonSrc: 'wpimages/wpgallery_forward_0.png',
    thumbRewindButtonSrc: 'wpimages/wpgallery_rewind_0.png',
    thumbForwardButtonSrc: 'wpimages/wpgallery_forward_0.png',
    rewindoverButtonSrc: 'wpimages/wpgallery_rewind_over_0.png',
    prevoverButtonSrc: 'wpimages/wpgallery_previous_over_0.png',
    playoverButtonSrc: 'wpimages/wpgallery_play_over_0.png',
    pauseoverButtonSrc: 'wpimages/wpgallery_pause_over_0.png',
    nextoverButtonSrc: 'wpimages/wpgallery_next_over_0.png',
    forwardoverButtonSrc: 'wpimages/wpgallery_forward_over_0.png',
    thumboverRewindButtonSrc: 'wpimages/wpgallery_rewind_over_0.png',
    thumboverForwardButtonSrc: 'wpimages/wpgallery_forward_over_0.png',
    strRewindToolTip: 'Reverse',
    strPreviousToolTip: 'Previous',
    strPlayToolTip: 'Play',
    strPauseToolTip: 'Pause',
    strNextToolTip: 'Next',
    strForwardToolTip: 'Forward',
    strThumbRewindToolTip: 'Reverse',
    strThumbForwardToolTip: 'Forward'

});
jQuery.slimbox('http://prannkii3332.pr.ohost.de/html2/Unbenannt3.mp4');
})
</script>
 
welches format muss denn das video dann sein ? ich habe schon swf, mp4 getestet es öffnet sich gar nichts. Maan
FancyBox ganz normal installiert
dann das eingefügt
HTML: 
    <script type="text/javascript">
    $(document).ready(function() {
        $('#img_01').fancybox();
        $('#img_01').click();
      });
    </script>

dann das
HTML: 
 <a rel="group" id="img_01" title="IPEx5" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf"><img src="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" /></a>
 
Zuletzt bearbeitet:
ok das video wird abgespielt aber es ist total verschoben, das video ist einfach oben und der hintergrund ist nicht mal dunkel geworden. Da oben steht jetzt nur ein Youtube Video.
Das soll aber in die Mitte und der Hintergrund soll dunkel werden.
 
Also das Video soll am Anfang in der Mitte kommen wenn man auf die Seite geht, man soll die tatsächliche Seite hinten etwas dunkler sehen können.
 
Poste doch mal die Adresse deiner Seite, damit wir es uns ansehen können.
 
Da ist kein Video zu sehen. Wenn ich mir den Quelltext ansehe, sehe ich nur das Javascript von Lightbox 2. Damit wird es auf keinen Fall gehen, weil diese keine Videos unterstützt. Du musst eine Lightbox nehmen, die Videos unterstützt und mit der Fancybox lagst Du da schon richtig. Wenn das Video damit angezeigt wurde, warst Du damit ja schon auf einem guten Wege. Hattest Du vielleicht das CSS-File nicht eingezogen?
In der Beschreibung von Fancybox steht:
Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
Zum Vergrößern anklicken....
Da mp4 offenbar nicht unterstützt wird, müsstest Du den Modus Iframe nehmen.
 
Zuletzt bearbeitet von einem Moderator:
achso, ja hier ist das nun
Ipex5

Das Video soll in der Mitte sein, der Hintergrund soll abgedunkelt werden und wenn man das Video wegklickt. Kann man ganz normal weiter surfen auf der Homepage.
 
Wie ich oben schon schrieb, musst Du den Modus Iframe verwenden, d. h. eine zweite HTML-Seite mit dem Video anlegen, so wie Du es früher schon mal hattest. Dann musst Du zusätzlich auf das Iframe-Element das Click-Event anwenden, so wie es in der Anleitung steht, die dir Chefchen gegeben hat.
So wie es jetzt ist, hast Du das Video einfach auf der Startseite eingebunden.
 
Ich dachte, ich hätte dir auf dieses Posting geantwortet. Anscheinend habe ich vergessen, den "Abschicken"-Button zu drücken.
Schon klar. Schau dir mal den Quelltext von Fancybox an
HTML: 
<a id="various5" href="/data/iframe.html">Iframe (75% width and height)</a>
und, etwas versteckt:
Code: 
	$("#various5").fancybox({
	'width'			: '75%',
	'height'			: '75%',
        'autoScale'     	        : false,
        'transitionIn'		: 'none',
	'transitionOut'		: 'none',
	'type'				: 'iframe'
	});
So musst Du es mit deiner HTML-Seite auch machen.
Ich habe es mal mit einer Seite von mir ausprobiert und dort funktioniert es:
Hier lebe ich
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben