主页 > 教程合集 > 网站建设 >

使用embed标签调用腾讯视频的修正方法

时间:2018-01-23 阅读:0

在《关于网站页面中插入视频的完整解决方案》中,余斗提到调用优酷、腾讯视频的视频网站的视频的方法,这里用到的是iframe和embed的,但是在使用iframe标签调用腾讯视频的时候,会出现控制条,如下图:

使用embed标签调用腾讯视频的修正方法

而使用embed标签则不会出现这个控制条:

使用embed标签调用腾讯视频的修正方法

但是有一个问题是,使用embed标签在移动端无法显示视频。综合以上2个方法,我们可以对浏览器进行判断,在PC点使用embed标签,移动端使用iframe。具体见以下代码:


<!DOCTYPE html>
<html lang="zh">

        <head>
                <meta charset="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
                <title>网页中插入视频的方法</title>
                <style type="text/css">
                        * {
                                margin: 0;
                                padding: 0;
                        }
                       
                        body {
                                text-align: center;
                        }
                </style>
        </head>

        <body>
                <iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen id="iframe"></iframe>
                <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=r03996hk7rg&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" id="embed"></embed>
                <script type="text/javascript">
                        var iframe = document.getElementById('iframe'),
                                embed = document.getElementById('embed');
                        iframe.style.display = 'none';
                        embed.style.display = 'none';
                        var userAgentInfo = navigator.userAgent;
                        var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
                        var flag = false;
                        var v = 0
                        for(v = 0; v < Agents.length; v++) {
                                if(userAgentInfo.indexOf(Agents[v]) > 0) {
                                        flag = true;
                                        break;
                                }
                        }
                        //检测浏览器为移动端浏览器
                        if(flag) {
                               
                                iframe.style.display = '';
                                embed.style.display = 'none';
                        } else {
                                iframe.style.display = 'none';
                                embed.style.display = '';
                        }
                </script>
        </body>

</html>
 

这样就可以完美解决问题。

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在网站建设分类下,2018-01-23最后更新,转载注明出处。

相关推荐

返回顶部