Отзывчивый Vimeo Player - полноэкранная ошибка

0

Чтобы обеспечить отзывчивое полноразмерное видео, я вставляю код Vimeo embed-iframe после загрузки страницы. Это позволяет моему сценарию определять ширину экрана, настраивать некоторые переменные в коде Vimeo для соответствия конкретному размеру экрана.

Вот сайт → http://leadercastlondon.barkbuilder.com/. Вы увидите видео о 2/3rds пути вниз по экрану.

Вот код JS, который я использую, чтобы вставить видео на страницу и повторно вставить, если страница будет изменена.

//on page load, insert the video
$(function () {
resizeVideo();
});

//put $(window) in variable
var win = $(window);

// when the page is re-sized
win.resize(function(){

    resizeVideo();
})

function resizeVideo() {
    //code for Vimeo in string
var iFrameString = '<iframe src="//player.vimeo.com/video/74968408?title=0&amp;byline=0&amp;portrait=0&amp;color=ff0179" width="980" height="551" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

    //calculate width of screen
var siteWidth = $(window).width();

    //width:height ratio
var rate = 1.77858439;
//create string with new width
    var siteWidthString = 'width="' + siteWidth + '"';

var videoHeight = siteWidth / rate;
    //create string with new height
var siteHeightString = 'height="' + videoHeight + '"';

    //regex to replace width within Vimeo iframe string
  var newiFrameString = iFrameString.replace(/width="[0-9]{1,4}"/,siteWidthString);

    //regex to replace height within Vimeo iframe string
    var newiFrameString = newiFrameString.replace(/height="[0-9]{1,4}"/,siteHeightString)

    //insert Vimeo HTML onto page
    $('.row.video').html(newiFrameString);
}

проблема

Когда видео воспроизводится, все в порядке. Но когда выбрана опция Fullscreen, это то, что я испытываю в Chrome 31.0.1650.63 Mac:

Видео не переходит в полноэкранный режим. Липкий навигатор остается видимым над столом. Выход из полноэкранного режима, похоже, полностью разрушает мою страницу. Я не могу прокручивать вверх или вниз.

В Safari происходят странные вещи.

Кто-нибудь сталкивается с чем-то подобным, когда отзывчивый игрок Vimeo выходит в полноэкранный режим? Спасибо за любую помощь, которую вы можете предоставить.

  • 0
    Я нажал кнопку полноэкранного режима, она не работает и «не может прокручиваться вверх или вниз», но после того, как я снова нажала кнопку полноэкранного режима, на этот раз она переходит в полноэкранный режим.
  • 0
    Может быть, полноэкранная функция не совместима с iframe, может быть, вы можете попробовать другой способ, например, embed, html5, object для представления видео.
Теги:
video
responsive-design
vimeo

3 ответа

0
Лучший ответ

Ну, более 1 года спустя, и эта ошибка снова ударила меня по лицу. Но я, наконец, решил.

У меня было событие в окне window.resize, которое запускалось, чтобы заменить HTML-код iframe каждый раз, когда страница изменила его размер. Тем не менее, "fullscreen API" также запускает событие "window.resize", которое затем запускает мой метод для замены кода iFrame.... поэтому нажатие на полноэкранном режиме вытирает HTML-видео и пытается его заменить.

Я нашел лучший способ изменить размеры iFrame для чувствительного сайта.

0

Я думаю, что главная проблема здесь в том, что вы полностью заменяете iframe при каждом изменении размера. Я считаю, что когда игрок выходит на экран в полноэкранном режиме, происходит событие изменения размера, в результате чего плеер больше не существует, что приводит к странным проблемам рендеринга.

Было бы намного эффективнее просто обновлять атрибуты width и height на iframe, а не полностью заменять его. Это также позволит избежать появления большого количества нагрузок в видео-статистике.

0

Оказывается, это противоречивое имя функции вызвало всю мою печаль. Doh!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню