2015-09-17 5 views
0

У меня есть встроенное видео vimeo, но, похоже, не интегрирует приглушение при загрузке.Vimeo embed auto mute при загрузке

Вот мой код видео

<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. здесь

Muting an embedded vimeo video

Но испытав, что использование этой скрипки, он также не кажется, чтобы отключить звук видео. http://jsfiddle.net/serversides/gfcpjLsy/

+0

ли вы пытаетесь играть различные значения для 'player.api ('SetVolume', 0);' на 'js' файле? –

+0

Я пробовал, но я не могу получить ни один из api для работы, даже если я положил? Api = 1 в URL-адрес видео. – ServerSideSkittles

+0

Когда дело доходит до 'froogaloop', есть две важные вещи: дайте свой' iframe' 'id' и добавьте это в URL-адрес Vimeo src как' player_id = %% ID %%', а также включите 'api = 1' в этой строке URL. Кроме того, где ваш iframe? Он не добавлен в JS и в вашем HTML ... – somethinghere

ответ

1

Поскольку вы динамически создаете iframe из vimeo api, вы должны установить громкость после загрузки iframe. Итак, в вашей функции embedVideo после того, как вы вставляете HTML-код в свой div, вы должны получить первый ребенок из div (это iframe), и вы добавите к нему событие onload.

После загрузки iframe вы должны использовать функцию $f froogaloop, чтобы инкапсулировать iframe в свою библиотеку, а затем вы можете использовать метод api для установки тома в ноль.

В вашем примере вы пытались вызвать метод api в 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 for you с вашим примером.

+0

Thankyou thats awesome! Старался мой мозг целую вечность, пытаясь понять, почему он не заглушил! – ServerSideSkittles

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) с помощью простых кнопок «Воспроизведение/Пауза» Mute/Unmute вместо их стандартных по умолчанию.

(если вы хотите добавить элементы управления по умолчанию назад, но приглушите, удалите «? Background = 1». По умолчанию background = 1 установит video.vimeo («setVolume», 0) и скроет элементы управления, поэтому я также добавлено приглушение при загрузке без набора background = 1).

Также обратите внимание: «Вам нужно будет работать на веб-сервере, а не открывать файл непосредственно в вашем браузере. Ограничения безопасности Flash и JS будут препятствовать работе API при локальном запуске».

http://www.taxidermyart.co.uk

+0

работы, спасибо Джейк! – ShinDarth

Смежные вопросы