Fancybox 视频下载和我添加了类

Question

我是这里和 fancybox / web 开发人员的新手。

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

但是当我运行它属于我的域 (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

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support 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 视频下载和我添加了类

Fancybox Video downloading and I have added the classes

jquery

youtube-api

fancybox

Fancybox 视频下载和我添加了 类

Fancybox Video downloading and I have added the classes

jquery

youtube-api

fancybox

Fancybox 视频下载和我添加了类