html5视频全频播放

html5视频全频播放

旋转90度

对video进行缩放

修正position

效果还凑合

代码

$(media).rotate({
    // angle: 90,
    duration: 100,
    animateTo: 90,
    callback: function() {
        console.log('rotate...');
        var rate = vm.screen_height / vm.screenWidth;
        var top = (vm.screen_height - vm.screenWidth) / 2;
        console.log('media.videoHeight: ' + media.videoHeight);
        var left = (vm.screenWidth - media.videoHeight * vm.screenWidth / media.videoWidth) / 2 - 2;
        //需要视频的高度
        $(media).css({
            zoom: rate * 100 + "%"
        });
        $(media).css({
            top: "-" + top + "px",
            left: "-" + left + "px"
        });
    }
});

奈何android不支持

android上不支持videoHeight,videoWidth ，WTF

然后直接如下改动居然可以了

首先设置video的宽度为屏幕高度，video高度为屏幕宽度，没错，就是反的。暂时不知道有没有其他的适应性问题.

var top = (vm.screen_height - vm.screenWidth) / 2;
$(media).css({
    top: "" + top + "px",
    left: "-" + top + "px"
});