Fancybox Загрузка видео, и я добавил классы

Я очень много newby здесь и с fancybox/web dev.Fancybox Загрузка видео, и я добавил классы

Я поместил код вместе, в основном, здесь. Локально мой vid играет,

, но когда я запустил его в своем домене (www), он хочет скачать и не играть Кто-нибудь знает почему? Я добавил классы по мере необходимости в нескольких сообщениях Спасибо!

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

источник

2016-07-27 Quintin White

Когда он воспроизводится локально, но не на сервере, обычно это проблема пути к вашей библиотеке плагинов. В вашем случае у вас есть 'fancybox/lib/...', который может не указывать точное местоположение, в котором браузер может загрузить плагин. Попробуйте использовать './fancybox/lib/...' или абсолютный путь (не будет больно узнать больше об абсолютных и относительных путях;) – JFK

Используйте официальный YouTube Player API Reference for iframe Embeds

IFrame Player API позволяет вставлять видео плеер YouTube на своем сайте и управлять плеером с помощью JavaScript. В отличие от API-интерфейсов Flash и JavaScript-плееров, которые связаны с внедрением Flash-объекта на вашу веб-страницу, IFrame API отправляет контент на тег на вашей странице. Такой подход обеспечивает большую гибкость, чем ранее доступные API, поскольку он позволяет YouTube использовать плеер HTML5, а не Flash-плеер для мобильных устройств, которые не поддерживают Flash.

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

Прочитайте документ об этом, следить за выполнением. Надеюсь, поможет!

источник

2016-07-28 16:07:29

Fancybox Загрузка видео, и я добавил классы

ответ

Смежные вопросы