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

Intro Video einbinden

P

praNNkii

Neues Mitglied
So entweder ich bin zu dumm oder ihr versteht nicht was ich meine, also sitze jetzt schon den ganzen Tag an dieser Sachen (ja ich weiss ich habe kein Leben).
Habe schon Fancybox, bumpbox benutzt aber irgendwie krieg ich das nicht hin, entweder er öffnet das Video als neuen Link oder gar nicht.

Also Auf meiner Seite möchte ich ein Intro reinmachen, das soll sofort gestartet werden wenn man auf die Seite kommt und das ganze soll auch gut aussehen.
So wie hier FiftyThree , wenn ihr dort auf Play Button drückt, seht ihr das der Hintergrund dunkler wird und das man das ganze einfach wegklicken kann. So möchte ich das auch haben.

|| Aber das es automatisch abgespielt wird und nicht erst gestartet werden muss. ||

Hoffe irgendjemand kann mir endlich damit helfen. Ich wäre so dankbar.


Meine Seite http://prannkii3332.pr.ohost.de/html2/index2.html

Grüße
 
Zuletzt bearbeitet:
gucks dir an Ipex5, habe das gemacht wie es dort stand
jquery - Is there an easy way to take FancyBox and Video JS to auto play movies in a light box? - Stack Overflow

Meine Video.html
HTML: 
<!DOCTYPE html>
<html lang="en">
    
    <head>
<!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="example_video_1" class="video-js" width="100%" height="95%" controls="controls" preload="auto" autoplay poster="images/image.jpg">
      <source src="http://prannkii3332.pr.ohost.de/html2/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
         <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="images/image.jpg" width="640" height="264" alt="Poster Image"
      title="No video playback capabilities." />
      </object>
    </video>
  </div>
  <!-- End VideoJS -->
        </body>

</html>
 
Nachdem ich über 20 Sekunden gewartet habe und auf der Seite immer noch nichts zu sehen war, habe ich das Browserfenster wieder zu gemacht. Mein Tipp: beschaffe dir ordentlichen Webspace.
 
Ja tut mir ja leid, aber ich will nicht bezahlen für eine Test Seite,


Meine Index.html
<!DOCTYPE html>
<html lang="en">
<head>

<title>Ipex5</title>
<body style="background-color:#8c8c8c">

<!-- Fancybox -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#image").live('click',function(){
$.fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'href' : 'video.html'
});
});
});
</script>

<div id="wrapper">
<div id="image">
<img height='480px' src='images/image.jpg'>
</div>
</div>

<!-- CSS Stylesheet-->
usw.
Zum Vergrößern anklicken....

Und meine Video.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Begin VideoJS --> <div class="video-js-box"> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <video id="example_video_1" class="video-js" width="100%" height="95%" controls="controls" preload="auto" autoplay poster="http://www.html.de/images/image.jpg"> <source src="http://prannkii3332.pr.ohost.de/html2/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="http://www.html.de/images/image.jpg" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> </object> </video> </div> <!-- End VideoJS --> </body> </html>
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben