0

我有一个 vimeo 嵌入式视频，但似乎无法在加载时集成静音。

这是我的视频代码

<div id="vimeo"> </div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

和使用的js

 <script>
// URL of the video 
        var videoUrl = 'http://www.vimeo.com/76979871?api=1?player_Id=vimeoyo';

        var endpoint = 'http://www.vimeo.com/api/oembed.json';
        var callback = 'embedVideo';
        var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
        function embedVideo(video) {
            document.getElementById('vimeo').innerHTML = unescape(video.html);
        }
        function init() {
            var js = document.createElement('script');
            js.setAttribute('type', 'text/javascript');
            js.setAttribute('src', url);
            document.getElementsByTagName('head').item(0).appendChild(js);
            var player = 'vimeoyo';
            player.api('setVolume', 0);
        }


        window.onload = init;


  </script>

我也遇到的问题是视频不是 iframe。

编辑：有一个使用 iframe 静音的答案。这里

静音嵌入的 vimeo 视频

但是经过测试，使用这个小提琴，它似乎也没有使视频静音。 http://jsfiddle.net/serversides/gfcpjLsy/

4

2 回答 2

1

由于您是iframe从 vimeo api 动态创建的，因此您应该只在 iframe 加载后设置音量。因此，在您的embedVideo函数中，在将 HTML 插入到 中之后div，您必须获取div（它是iframe）的第一个孩子，并向其中添加一个onload事件。

iframe加载完成后，必须使用froogaloop的$f函数将iframe封装到它的库中，然后可以使用api方法将音量设置为零。

在您的示例中，您试图api在 a 中调用该方法string，但它永远不会起作用。

function embedVideo(video) {
  var div = document.getElementById('vimeo');
  div.innerHTML = unescape(video.html);

  var ifr = div.firstChild;
  ifr.addEventListener('load', function(e) {
    var player = $f(ifr);
    player.api('setVolume', 0);
  });
}

function init() {
  var js = document.createElement('script');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', url);
  document.getElementsByTagName('head').item(0).appendChild(js);
}

我已经为您创建了一个 plnkr，您的示例正在运行。

于 2015-09-17T17:11:04.917 回答
1

**这是我的解决方案：http: //jsfiddle.net/jakeoblivion/phytdt9L/5/

（您需要自己的播放/暂停静音/取消静音图标）

  //load video muted
  var video = $("#myvideo");
  video.vimeo("play");
  video.vimeo("setVolume", 0);

    //toggle play/pause
  $('#play-pause').click(function() {
    $(this).toggleClass('play');
    if ($(this).hasClass('play')) {
      //pause video
      video.vimeo("pause");
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/play.png") no-repeat');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/pause.png") no-repeat');
    }
  });

  //toggle mute/unmute
  $('#mute-unmute').click(function() {
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
      //unmute video
  video.vimeo("setVolume", 1);
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/volume.png") no-repeat');

    } else {
      //mute video
  video.vimeo("setVolume", 0);
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/mute.png") no-repeat');
    }
  });

花了很长时间尝试，但似乎没有任何效果。

我只是想让 Vimeo 自动播放静音（音量 0），使用简单的播放/暂停静音/取消静音控件，而不是默认控件。

（如果您想添加默认控件但保持静音，请删除“？background=1”。默认情况下，background=1 将设置 video.vimeo("setVolume", 0) 并隐藏控件，所以我还添加了静音在没有设置背景=1 的情况下加载）。

另请注意：“您需要在 Web 服务器上运行，而不是直接在浏览器中打开文件。Flash 和 JS 安全限制将阻止 API 在本地运行时工作。”

http://www.taxidermyart.co.uk

于 2016-02-28T11:54:30.220 回答