demo、javascript、jquery、无聊产物

视频手动载入js

留下评论

俺花了好长时间，用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子（无视频源）video标签的例子(同上)

object标签的例子(同上)

其实屏蔽了以后看起来都是一样的。。

这货的功能：点击以后再载入，防止意外流量损失或带宽？占用
这就是个鲜明的例子http://blog.luojia.tk/?p=181
里面装满了视频，这样就可以解决打开这个网页一下载入很多视频的问题了

原理：让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓

1
2
3
4
 
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面
objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签
 

特点：插队的div使用源元素的宽高和定位【本来想把z-index也算进去的，时间不够就不做了↓

1
2
3
4
5
6
7
8
 
//一堆if用来判断是否有这些属性
if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}
 

全代码↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
var changevideos=function(){
var target=new Object;
function findtag(tag) {
        return document.getElementsByTagName(tag);
}
function getwidth(obj){
    if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;}
}
function getheight(obj){
    if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;}
}
function getposition(obj){
    return obj.style.position?obj.style.position:false;
}
function getright(obj){
    return obj.style.right?obj.style.right: false;
}
function getleft(obj){
    return obj.style.left?obj.style.left:false;
}
function changeinner(html){
    target=event.srcElement?event.srcElement:event.target;
    target.innerHTML=html;
}
function run(objarray){
    for (var i = 0; i < objarray.length; i++) {
                var aimhtml = objarray[i].outerHTML;
    var tmpdiv=document.createElement("div");
    if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}
tmpdiv.innerHTML='&lt;div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;">&lt;center>&lt;h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失&lt;br>此处已被自动屏蔽&lt;/h2>&lt;span style="position:absolute;bottom:2px;right:2px;">点击恢复&lt;/span>&lt;/center>&lt;/div>';//填上填充显示的内容
//tmpdiv.style.overflow="hidden";
tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')');
tmpdiv.style.display="inline-block";
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);
objarray[i].parentNode.removeChild(objarray[i]);
        }
}
function changehideneededtag() {
    var tmpstyle=document.createElement("style");
    tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}";
    document.getElementsByTagName("head")[0].appendChild(tmpstyle);
        var a;
        if(a=findtag("embed")){
        run(a);}
        if(a=findtag("object")){
        run(a);}
        if(a=findtag("video")){
        run(a);}    
}
changehideneededtag();
}
changevideos.changeinner=function(html){
    target=event.srcElement?event.srcElement:event.target;
    target.innerHTML=html;
}
 

没时间了所以还有些可能出错的地方没做错误处理，以后来补上


本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统，如果看不到评论框，请尝试爬墙。