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();
        }
    }

Vimeo - 全屏 - 自动播放

1 个答案: