停止播放特定分辨率的嵌入式视频

我正在一个包含两个相同vimeo视频的网站上工作。一个是我想在另一个地方观看视频的1000px分辨率的较大屏幕分辨率。所以我把它们中的两个放在那里，并用一些CSS控制它们中哪些是可见的。停止播放特定分辨率的嵌入式视频

但是，视频需要在页面加载时自动播放。而display:none; css标签，它只会隐藏视频，而不是暂停/禁用视频。

有没有一种很好的方法来控制它？目前我正在尝试使用jQuery和Froogaloops来做到这一点，但尚未能完成它的工作。这是我到目前为止：

jQuery(document).ready(function($) { 

    var player = $("#82625501"); 
    froogaloop = $f(player[0].id); 
    // Optimalisation: Store the references outside the event handler: 
    var $window = $(window); 

    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 1000) { 

      froogaloop.api('pause'); 

     } 
     else { 
      froogaloop.api('play'); 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
});

这只适用于调整屏幕，而不是第一次加载。这个怎么做？或者也许有一个更简单的方法？提前致谢！

来源

2014-01-07 Trekdrop

你使用什么类型的球员？它应该有预定义的属性来启用自动播放。至于显示器，当做类似的事情时，我用媒体查询来隐藏/显示我想要的不同大小的内容。 – Abernasty

@Abernasty我正在嵌入一个vimeo视频，所以vimeo播放器？ – Trekdrop

好了，你可能会想要做的就是改变自动播放参数上Vimeo's embed API如所概括的“1”，像这样：

<iframe src="//player.vimeo.com/video/82527075?autoplay=1" width="500" height="209" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/82527075">The Awareness</a> from <a href="http://vimeo.com/user2354244">Henry</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

凡?autoplay=1追加到src网址是什么将触发自动播放，但对于大多数移动设备而言，这不适用于数据消费最佳实践。

您可以手动添加或从Vimeo获取嵌入代码时，只需打开显示选项菜单并选择自动播放以自动附加。

至于禁用视频，至少在我的Firefox测试中，一旦视频经过折点设置为display: none;，根据音频截取判断它停止播放。

嗯，我想this question有助于解决，如果你想在视频不可见时加以阻止。

来源

2014-01-07 15:32:48 Abernasty

感谢您的回复，但实际上您并没有给我答案。我知道如何播放视频以及如何隐藏视频，这不是我的问题。您提供的链接可能很有用。 – Trekdrop

停止播放特定分辨率的嵌入式视频

回答

相关问题