您当前的位置:主页 > 教程合集 > 网站建设 > 网站利发国际网站建设

使用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>
     
    这样就可以完美解决问题。
关键字词embed腾讯视频
余斗余斗
  1. 转载请注明:使用embed标签调用腾讯视频的修正方法
  2. 版权声明:本站原创文章,由发表在网站建设分类下,于2018-01-23最后更新
关于网站页面中插入视频的完整解决方案
discuz部署https(ssl)后会员无法登录的解决方案
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索