Question

这是视频网址

<iframe src="http://xxxx.com/embed-xxx-720x405.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="720" height="405"></iframe>

我有这个JS来改变网址中的宽度和高度，从640px：

$(window).on("load", function(event){
    var w = $(this).width() -50;
    if(w <= 640)
        $('.videoimg iframe').each(function () {
            $(this).attr('src', $(this).attr('src').replace('720', '' + w + ''));
            $(this).attr('src', $(this).attr('src').replace('405', '305'));

            $(this).attr('width', $(this).attr('width').replace('720', '' + w + ''));
            $(this).attr('height', $(this).attr('height').replace('405', '305'));
        })
});

它适用于加载网站，但是当我在横向上翻转手机时我需要它才能工作，这样人们就不需要刷新页面了。

调整大小功能不起作用，它应该是那样的

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        window.addEventListener("orientationchange", function() {
            rvlWidth(w);
        }, false);

但我不知道该怎么做，你有什么解决办法吗？

Answer 1

似乎在'load'事件被触发之前设置了旋转事件+在上下文中没有定义'w'（至少在最火的时候）

尝试收集以下代码

var onRotateCallback = function() {
    var screenWidth = $(window).width() - 50;
    var videoFrames = $('.videoimg iframe');
    if (screenWidth <= 640) {
        videoFrames.each(function() {
            var frame = $(this);
            var originalSRC = $(this).attr('src');
            var newSRC = originalSRC.replace('720', screenWidth).replace('405', '305');
            frame.attr('src', newSRC);
            frame.attr('width', screenWidth);
            frame.attr('height', '350');
        });

    }
};

$(window).on("load", function(e) {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        onRotateCallback();
        $(window).on("resize", function() {
            onRotateCallback();
        });
    }
});

将手机翻转为横向模式后调整视频帧大小

1 个答案: