一个关于引用外链视频的小问题
我这个问题属于个极小众的问题,所以简单写下来如果又遇到和我类似情况的朋友可以参考一下。
先简单描述一下问题情况,当我们想在自己的网站添加一个视频的时候又要想偷懒直接引用外站视频(说好听点也是节省自身服务器资源)的时候,国内大部分的视频网站都是基于Adobe flashplayer开发的播放器。我今天在做的时候就发现如果引用embed 标签的外链资源会导致几乎全部的手机浏览器不兼容,pc站没啥大问题,部分浏览器都需要安装各自的flashplayer。
以上这个情况对于用户体验来说绝对是糟糕的,所以我采用了优酷提供的iframe内嵌的模式进行引用,但是这个时候又有个尴尬的问题,当我想要把这个视频隐藏的时候我把我嵌套的div隐藏掉,但是那个打开的iframe还是会在后台播放视频。并且试了n多种隐藏iframe的方法都不可行,后来又想了一个直接替换iframe地址的方式看能不能结束后台视频的播放,结果可想而知又是失败告终。
不过最后还是想到了一个巧妙地方法。那就是可以使用jQuery的append方法将我们需要加载的模块在用户点击事件的时候才将其加入到dom tree中,而当用户点击关闭的时候我们直接把这个iframe节点remove掉。经过测试在Android和ios以及pc各大主流浏览器都对于此方法支持还不错。