Fancybox Video herunterladen und ich habe die Klassen hinzugefügt

bin sehr viel ein Newby hier und mit fancybox/web dev.Fancybox Video herunterladen und ich habe die Klassen hinzugefügt

Ich habe etwas Code zusammen, vor allem hier gefunden. Lokal spielt mein Video,

aber wenn ich es von meiner Domain (www) laufen lasse, möchte es herunterladen und nicht spielen Wer weiß warum? Ich habe die Klassen wie erforderlich in ein paar Posts hinzugefügt Vielen Dank!

<!DOCTYPE HTML> 


<html> 
<head> 
<title>MM Vid</title> 

<!-- Add jQuery basic library --> 
<script type="text/javascript" src="jquery-lib.js"></script> 

<!-- Add required fancyBox files --> 
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script> 

<!-- Optional, Add fancyBox for media, buttons, thumbs --> 
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script> 
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script> 
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script> 

<!-- Optional, Add mousewheel effect --> 
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 


<style> 

</style> 
</head> 
<script class="fancybox" src="http://www.youtube.com/player_api"></script> 



<body> 
<script type="text/javascript"> 

function onYouTubePlayerAPIReady() { 
    $(document).ready(function() { 
     $.fancybox({ 
      href: "1.mp4", 
      **type: "iframe", 
      class: "fancyBox",** 
      beforeShow: function() { 
       // Find the iframe ID 
       var id = $.fancybox.inner.find('iframe').attr('id'); 
       // Create video player object and add event listeners 
       var player = new YT.Player(id, { 
        events: { 
         'onStateChange': function (event) { 
          if (event.data === 0) { 
           $.fancybox.close(); 
          } // if 
         } // onStateChange 
        } // events 
       }); // YT.Player 
      } // beforeShow 
     }); // fancybox 
    }); // ready 
} // onYouTubePlayerAPIReady 


</script> 

</body> 
</html>

Quelle

2016-07-27 Quintin White

Wenn es lokal, aber nicht auf dem Server spielt, ist normalerweise ein Pfadproblem zu Ihrer Plugin-Bibliothek. In Ihrem Fall haben Sie 'fancybox/lib/...', die möglicherweise nicht den genauen Speicherort angeben, von dem der Browser das Plugin herunterladen kann. Verwenden Sie './fancybox/lib/...' oder einen absoluten Pfad (es wird nicht schaden, mehr über absolute und relative Pfade zu erfahren;) – JFK

Verwenden Sie die offizielle YouTube Player API Reference for iframe Embeds

Der IFrame Player API können Sie ein YouTube-Video-Player auf Ihrer Webseite einbetten und den Player mit JavaScript steuern. Im Gegensatz zu den Flash- und JavaScript-Player-APIs, bei denen beide ein Flash-Objekt in Ihre Webseite einbetten, veröffentlicht die IFrame-API Inhalte auf einem Tag auf Ihrer Seite. Dieser Ansatz bietet mehr Flexibilität als die zuvor verfügbaren APIs, da YouTube einen HTML5-Player anstelle eines Flash-Players für mobile Geräte bereitstellen kann, die Flash nicht unterstützen.

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html>

Lesen Sie das Dokument darüber, die Umsetzung folgen. Ich hoffe es hilft!

Quelle

2016-07-28 16:07:29

Fancybox Video herunterladen und ich habe die Klassen hinzugefügt

Antwort

Verwandte Themen