视频全屏,自动播放

346 阅读1分钟

字体压缩(字蛛)

一个17M多的字体能压缩到只有14KB. 

视频全屏播放, object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签,可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。效果同background-size类似;
可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。效果同background-position类似;  对于图片居中的可用以下方式实现。

    <style>        img {            height: 250px;            width: 250px;            border: 1px solid red;            object-position: right top;            object-fit: none;        }    </style>    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg"> 

注:object-fit 不兼容IE,需引 bideo.js   示例:gitee.com/yuebing1212…

 3, 同一字体不同类型效果会不一样, 

Normal 会出现一段文字看起来像2个字体

ios 微信浏览器打开时没有底部前进后退状态栏问题

//解决 ios 微信浏览器打开时没有底部前进后退,跳转后才有。 该方法可以保持一直有,方便做全屏用function pushHistory() {    var state1 = {        title: "title",        url: "#"    };    window.history.pushState(state1, "title", "#");}

语言包切换

用对象Key相同,value不同的方式实现。

var language = {    ch: {        '回到主页': '回到主页',        '愿景': '愿景',     },    en: {        '回到主页': 'SUMMARY',        '愿景': 'VISION',     }}

    $('.open-close').click(function() {        let lang = $(this).hasClass("en") ? 'cn' : 'en';         $(this).toggleClass("en");        eachLang(lang);    });    function eachLang(lang) {        $('[data-lau]').each(function(e) {            var name = $(this).data('lau')            if (lang == 'cn') {                $(this).html(language.ch[name])            } else {                $(this).html(language.en[name])            }        });    }

视频 ios 需引微信sdk

//解决微信不能自动播放问题 
// ios 需引微信sdk document.addEventListener("WeixinJSBridgeReady", function () {    myVideo.play();}, false);//安卓let myVideo = document.getElementById("media");document.addEventListener('touchstart', function () {    myVideo.play();}, false);