{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

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

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

而使用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>
 

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


资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用embed标签调用腾讯视频的修正方法
喜欢 ()分享 (0)