Question

非常喜欢这里和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>

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

阅读相关文档，按照实施方式进行。希望它有所帮助！

Fancybox视频下载，我已经添加了类

1 个答案: