javascript - Vimeo - 全屏 - 自动播放

Question

任何人都可以建议是否可以将 Vimeo 视频作为背景视频自动播放 - 我们有一个 5 秒的短视频，我们希望自动播放该视频，然后在视频完成时触发脚本(如下)以加载到叠加层中一个播放按钮 - 然后用播放按钮加载一个更大的视频 - 这就是我们到目前为止所拥有的 -

<!-- Navigation -->
  <header class=" noPad vidHead" >

 <iframe src="//player.vimeo.com/video/120042881?autoplay=1" style="width:100%; height:auto;"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

   <div class="fadeOver">
                 <a href="#"><img src="img/logos and icons/PlayIconVideo.png" width="120" height="136" alt="Play Video"></a>
    </div>

 </header> 

   $(function () {
       var player = $('iframe');
       var url = window.location.protocol + player.attr('src').split('?')[0];
       var status = $('.status');

       // Listen for messages from the player
       if (window.addEventListener) {
           window.addEventListener('message', onMessageReceived, false);
       }
       else {
           window.attachEvent('onmessage', onMessageReceived, false);
       }

       // Handle messages received from the player
       function onMessageReceived(e) {
           var data = JSON.parse(e.data);

           switch (data.event) {
               case 'ready':
                   onReady();
                   break;

               case 'playProgress':
                   onPlayProgress(data.data);
                   break;

               case 'pause':
                   onPause();
                   break;

               case 'finish':
                   onFinish();
                   break;
           }
       }

       // Call the API when a button is pressed
       $('button').on('click', function () {
           post($(this).text().toLowerCase());
       });

       // Helper function for sending a message to the player
       function post(action, value) {
           var data = {
               method: action
           };

           if (value) {
               data.value = value;
           }

           var message = JSON.stringify(data);
           player[0].contentWindow.postMessage(data, url);
       }

       function onReady() {
           status.text('ready');

           post('addEventListener', 'pause');
           post('addEventListener', 'finish');
           post('addEventListener', 'playProgress');
       }

       function onFinish() {
           $(".fadeOver").fadeIn("slow");
       }

       function onPlayProgress(data) {
           status.text(data.seconds + 's played');
       }
   });

 $( ".fadeOver" ).click (function(){

    $( ".vidHead" ).html('<iframe src="//player.vimeo.com/video/119551148" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

});

</script>

当前发生的情况是该过程正常工作，但视频很小并且居中而不是全屏..

Answer 1

我没有看到您要求切换全屏的位置。

尝试此代码，它会在单击 fadeOver 按钮时添加全屏请求，并且仅更新 iframe 的 src，而不是重新创建新的。

$(function () {
       var player = $('iframe');
       var url = window.location.protocol + player.attr('src').split('?')[0];
       var status = $('.status');
         $( ".fadeOver" ).hide();
       // Listen for messages from the player
       if (window.addEventListener) {
           window.addEventListener('message', onMessageReceived, false);
       }
       else {
           window.attachEvent('onmessage', onMessageReceived, false);
       }

       // Handle messages received from the player
       function onMessageReceived(e) {
           var data = JSON.parse(e.data);

           switch (data.event) {
               case 'ready':
                   onReady();
                   break;

               case 'playProgress':
                   onPlayProgress(data.data);
                   break;

               case 'pause':
                   onPause();
                   break;

               case 'finish':
                   onFinish();
                   break;
           }
       }

       // Call the API when a button is pressed
       $('button').on('click', function () {
           post($(this).text().toLowerCase());
       });

       // Helper function for sending a message to the player
       function post(action, value) {
           var data = {
               method: action
           };

           if (value) {
               data.value = value;
           }

           var message = JSON.stringify(data);
           player[0].contentWindow.postMessage(data, url);
       }

       function onReady() {
           status.text('ready');

           post('addEventListener', 'pause');
           post('addEventListener', 'finish');
           post('addEventListener', 'playProgress');
       }

       function onFinish() {
           $(".fadeOver").fadeIn("slow");
       }

       function onPlayProgress(data) {
           status.text(data.seconds + 's played');
       }
   });

 $( ".fadeOver" ).click (function(){

    $( "iframe" )[0].src= '//player.vimeo.com/video/119551148';
    requestFullscreen($( "iframe" )[0]);

});

function requestFullscreen(el){
    if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        }
    }