Fancybox 视频下载，我已经添加了课程答案

【问题标题】：Fancybox Video downloading and I have added the classesFancybox 视频下载，我已经添加了课程
【发布时间】：2016-07-27 16:13:24
【问题描述】：

我是这里的新手，并且使用了 fancybox / web dev。

我把一些代码放在一起，主要是在这里找到的。在本地播放我的视频，

但是当我在我的域 (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>

【问题讨论】：

当它在本地播放但不在服务器上播放时，通常是插件库的路径问题。在您的情况下，您有fancybox/lib/...，它可能无法提供浏览器可以从中下载插件的确切位置。尝试使用./fancybox/lib/... 或绝对路径（了解更多关于绝对和相对路径的信息不会有什么坏处；）

标签： jquery youtube-api fancybox

【解决方案1】：

使用官方YouTube Player API Reference for iframe Embeds

IFrame 播放器 API 可让您在自己的网站上嵌入 YouTube 视频播放器并使用 JavaScript 控制播放器。与 Flash 和 JavaScript 播放器 API 不同，它们都涉及在您的网页上嵌入 Flash 对象，IFrame API 将内容发布到您页面上的标签。这种方法提供了比以前可用的 API 更大的灵活性，因为它允许 YouTube 为不支持 Flash 的移动设备提供 HTML5 播放器而不是 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>

阅读有关它的文档，然后执行。希望对您有所帮助！

【讨论】：