zoukankan      html  css  js  c++  java
  • 视频播放兼容ie8

    你们知道一个H5标签吗?反正我是真的不知道,他就是强大的无所不能的<embed />,这个一个插件性的标签,引入src,真的是强大!我兼容ie8的视频播放在网上找各种插件搞了两天都没搞出来,直到遇到了这个神一样的存在。

    我写了一个简单的例子:

    一、html部分:
      <div class="video-btn">观看视频<img src="/static/home/ico_home_player.png?v=1" alt=""></div>   <div id="ieVedio"></div>

      
    二、js部分:
    //获取IE版本号(非IE返回>=12的值)
    function getIEVer() {
        var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
        while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]);
        v = v > 4 ? v : 12;
    
        if (v >= 12 && 'ActiveXObject' in window) {
            v = document.documentMode;
        }
        return v;
    }
    
    
    $('.video-btn').on('click', function() {
        //let Document = document.body || document.documentElement;
        if($('#ieVedio').css('display') === "block") {
            $('#ieVedio').css('display', 'none');
            //$('#jumpBg').css('display', 'none');
            $('#ieVedio').empty();
            //Document.style.overflow = 'auto';
        } else {
            $('#ieVedio').css('display', 'block');
            //$('#jumpBg').css('display', 'block');
            //Document.style.overflow = 'hidden';
            browser();
        }   
    });
    $('#ieVedio').on('click','img',function(){//关闭视频按钮
        $('#jumpBg').css('display','none');
        $('#ieVedio').css('display','none');
        $('#ieVedio').empty()
    });
    
    function browser(){
        if(getIEVer() < 12) {//ie下
            var iemovie=$(' <img src="/static/home/lALOa5T61kBA_64_64.png" alt=""/>' +
                '<embed src="https://image.smtop1000.com/top1000/TOP1000.mp4" width="650" height="400"></embed>');
            $('#ieVedio').append(iemovie);
        } else {//其他浏览器
            var movie=$('<img src="/static/home/lALOa5T61kBA_64_64.png" alt=""/> ' +
                '<video src="https://image.smtop1000.com/top1000/TOP1000.mp4" width="650" height="400" controls="controls" autoplay="autoplay"></video>');
            $('#ieVedio').append(movie);
        }
    
    }
    就这么简单就搞定了,我去,网上好多插件都是不支持ie8的,真是伤脑筋。
    不过好像有一个问题,就是点击关闭视频按钮的时候,在ie下视频的声音依然还存在,这好像也是一个bug,我还没解决,如果有可以解决的大神,可否告知小弟一声,小弟先行谢过啦!

  • 相关阅读:
    DateTime.Now.ToString("yyyy/MM/dd") 时间格式化中的MM为什么是大写的?
    新入门PGSQL数据库(尝试利用PGPOOL实现分布式),摘录笔记
    MongoDB入门教程之C#驱动操作实例
    使用MongoDB C#官方驱动操作MongoDB
    【OOAD】OOAD概述
    【OOAD】设计模式概述
    【OOAD】面向对象设计原则概述
    【OOAD】OOP的主要特征
    深入浅出设计模式——访问者模式(Visitor Pattern)
    深入浅出设计模式——模板方法模式(Template Method Pattern)
  • 原文地址:https://www.cnblogs.com/youngboy-front/p/7654947.html
Copyright © 2011-2022 走看看