web-dev-qa-db-ja.com

埋め込まれたvimeoビデオのミュート

私が作成しているWebサイトには、vimeoビデオが埋め込まれています。クライアントは、vimeoで見つけた人のために、ビデオのサウンドを明らかに保つ必要があります。しかし、彼女のウェブサイトにとって、音は単純に迷惑です。そのため、埋め込み用のコード内のオーディオをミュートする方法を見つける必要があります。私はそれをグーグルで調べましたが、読みやすいものを見つけることができないようです。以下のコードからわかるように、リンク内でautoplayコマンドを使用して、サウンドをミュートするために同様のことができると期待していました。

    <iframe src="http://player.vimeo.com/video/4415083?  title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

ありがとう

htmlvimeovimeo-apimutevimeo-player
24
DanielNolan

それが誰かを助ける場合、 Vimeoは 'background'パラメータを追加しました 動画を埋め込むために、動画を静かに自動再生します。いくつかのケースでは、人々がビデオをミュートしたい場合に役立ちます-これはその例です：

<iframe src="https://player.vimeo.com/video/76979871?background=1" 
    width="500" height="281" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>
37
toby1kenobi

vimeoでsetVolume apiを使用します。player.api('setVolume', 0);のようになります...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
        <iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1&player_id=vimeo_player" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        <script>
        var iframe = $('#vimeo_player')[0],
            player = $f(iframe),
            status = $('.status');

            player.addEvent('ready', function() {
                player.api('setVolume', 0);
            });
        </script>
19
gadss

私は、運のない答えの例を試しました。ドキュメントを調べた後、パラメータ&player_id=IFRAME_IDが欠落していることに気付きました。 Vimeo APIで何か変更されたのかもしれませんが、とにかく次の例が私にとってはうまくいきます：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="//player.vimeo.com/video/4415083?api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script>
$(function() {
    var vimeo_iframe = $('#vimeo_player')[0];
    var player = $f(vimeo_iframe);

    player.addEvent('ready', function() {
        player.api('setVolume', 0);
    });
});
</script>
13
Jordy

Vimeoが更新されたライブラリを提供しているようで、API構文は古いもの（Froogaloop）とは少し異なります。 JSで埋め込み動画をミュートする方法は次のとおりです。

<!--Add the id attr to the iframe tag to use as a selector-->
<iframe id="embeddedVideo" src="http://player.vimeo.com/video/4415083? title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<!--Include the Vimeo API Library-->
<script src="https://player.vimeo.com/api/player.js"></script>

<!--Select and manipulate your video-->
<script type="text/javascript">
    //Select the #embeddedVideo element
    var video = document.getElementById('embeddedVideo');

    //Create a new Vimeo.Player object
    var player = new Vimeo.Player(video);

    //When the player is ready, set the volume to 0
    player.ready().then(function() {
        player.setVolume(0);
    });
</script>

これが新しいライブラリを使用している人の助けになることを願っています。ドキュメントは vimeo/player.js にあります

11
Cafe Coder

非有料会員向け

mutedパラメーターを追加するだけです。例えば。：

<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>

有料会員向け

Vimeoによれば、backgroundパラメーターは有料メンバーがホストする動画でのみサポートされています。

ソース： https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos

8
Meydjer Windmüller

ここでの回答のほとんどはVimeoの古いAPIを参照しているためです。新しいAPIを使用した最も簡単な方法を次に示します。 CDNからvimeo player.jsを含めるか、ダウンロードするか、npmから含めることができます。

<script src="https://player.vimeo.com/api/player.js"></script>

または

npm install @ vimeo/player

その後、次のことができます。

    <script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.setVolume(0);
  </script>

それでおしまい。また、angular 2+、

import * as Vimeo from '@vimeo/player';

const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);

ここで、e.targetはテンプレートから渡される$ eventです。おそらくiframe（ロード）イベントかもしれません。または、jqueryを使用してiframeを選択できます。

8
dilantha111

**ここに私の解決策があります： 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', 'pink');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'blue');
    }
  });

  //toggle mute/unmute
  $('#mute-unmute').click(function() {
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
      //unmute video
  video.vimeo("setVolume", 1);
      $(this).css('background', 'green');

    } else {
      //mute video
  video.vimeo("setVolume", 0);
      $(this).css('background', 'red');
    }
  });

年齢は試してみましたが、何もうまくいかないようでした。

デフォルトのコントロールではなく、シンプルなPlay/Pause Mute/UnmuteコントロールでVimeoの自動再生をミュート（ボリューム0）したかっただけです。 （私が置いた一時的な色の代わりにアイコンを自由に使用してください）。

（デフォルトのコントロールを元に戻してもミュートのままにしたい場合は、「？background = 1」を削除します。デフォルトではbackground = 1はvideo.vimeo（ "setVolume"、0）を設定し、コントロールを非表示にします。 background = 1を設定せずに読み込みます）。

また、「ブラウザでファイルを直接開くのではなく、Webサーバーで実行する必要があります。JSセキュリティ制限により、ローカルで実行するとAPIが機能しなくなります。」

2
jake

@Gadssの回答はうまく機能しますが、Vimeo APIのアクティベーションを含めるにはiframe srcを更新する必要があることがわかりました。 vimeo IDの後にapi = 1を含めるだけです。

また、これは何らかの理由でSafariで動作しない場合があることもわかっています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
    <iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <script>
    var iframe = $('#vimeo_player')[0],
        player = $f(iframe),
        status = $('.status');

        player.addEvent('ready', function() {
            player.api('setVolume', 0);
        });
    </script>
2
jonnglass
<iframe src="http://player.vimeo.com/video/4415083?muted=1;  title=0;byline=0;portrait=0;color=d01e2f;autoplay=1" width="500" height="281"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

動画をミュートするために「muted = 1」を指定できます... chromeミュートされた動画の自動再生を許可します

1
Bala

これは私のために働いた唯一の方法です： http://jsfiddle.net/87dsjL8q/108/

var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );

 player.addEvent('ready', function() {
     player.api('setVolume', 20); 
 });
1
Pavelescu Razvan

挿入しようとします?muted=1リンク後attribute src

例えば

<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">
0
Huynh Thai Hung

私はそれを行う方法を見つけました。ビデオをミュートして開始して自動再生し、最初のtimeupdateでボリュームを1に設定します。

var options = {
    id: 'video_id_here',
    width: 640,
    loop: false,
    muted: true,
    autoplay: true
};

var player = new Vimeo.Player('vimeo', options);

player.setVolume(0);

player.on('timeupdate', set_autoplay_volume );

function set_autoplay_volume(){
    player.setVolume(1);
    player.off('timeupdate', set_autoplay_volume );
}
0
Roland Murg