1、把视频传到优酷、腾讯等视频网站中

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        .video .mask{

            display:none;

        }

        .video{

            width:100%;

            position:relative;

        }

        .cc{

            width:60px;

            height:30px;

            background:red;

            z-index:999;

            position:absolute;

            left:736px;

            top:10px;;

        }

    </style>

</head>

<body>

<div class="video">

    <iframe src="2.html" style="width:800px;height:520px" class="c21"></iframe>

    <div class="cc"></div>

</div>

</body>

<script src="jquery.js"></script>

<script>

    $(".video").hover(function(){

        $(".video-btn").css("display","none");

        $(".mask").css("display","block")

    },function(){

        $(".video-btn").css("display","block");

        $(".mask").css("display","none")

    })

    $(".cc").on("click",function(){

        $(".c21").attr("src","2.html")

    })

</script>

</html>

主页

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .video-btn,.mask{

            position:absolute;

            top:50%;

            left:50%;

            margin-top:-75px;

            margin-left:-75px;

        }

        .video-bg{

            width:100%;

        }

    </style>

</head>

<body>

<a href="http://v.qq.com/iframe/player.html?vid=u0133b4ownh&amp;auto=1&amp;tiny=0" data-lightbox-type="iframe" class="open-video cbp-lightbox">

    <img class="video-btn" src="video_play.png">

    <img class="mask" alt="" src="video_play_hover.png">

    <img src= "service_banner.png" class="video-bg"/>

</a>

</body>

</html>

iframe页

2、在主页中添加一个iframe标签，并设置好宽高，然后弄个div定位在iframe的右上角（用来作为关闭iframe的按钮）

3、把视频路径放到iframe页面中的a标签。然后在a标签中添加默认的背景图等。

通过a标签在页面上显示视频网站中的视频的更多相关文章

  1. append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll方法被调用后，原本在页面上显示的元素会消失

    详细描述: $ele.append..appendTo..prepend..prependTo..before..insertBefore..after..insertAfter..replaceAl ...

  2. HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...

  3. mvc在页面上显示PDF

    今天看到需求要在页面上显示pdf,自己整了半天,啥效果都没有,偶尔有效果还各种不兼容,很无语的说.捣鼓了半天,没办法了,去谷歌了下,介绍了各种插件,各种方法,但是都挺繁琐的,本人不是一个很喜欢使用插件 ...

  4. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...

  5. Django学习路7_注册app到能够在页面上显示app网页内容

    在根目录下创建一个 app3 app3 是新 app 的名字 创建一个 urls.py 在 urls.py 中添加 urlpatterns 列表 容纳需要显示在页面上的函数 from django.c ...

  6. Python+Tornado+Tampermonkey 获取某讯等主流视频网站的会员视频解析播放

    近期,<哪吒之魔童降世>在各大视频软件可以看了,然而却是一贯的套路,非会员谢绝观看!!!只能从国内那些五花八门的视频网站上找着看了,或者通过之前本人说的 Chrome 的油猴插件,传送门  ...

  7. <body>标签，网页上显示的内容放在这里

    在网页上要展示出来的页面内容一定要放在body标签中.如下图是一个新闻文章的网页. 在浏览器中的显示效果: 示例: <!DOCTYPE HTML> <html> <hea ...

  8. 网络应用发布到linux上的web服务器上页面上显示麻将牌式字符的问题

    什么是麻将牌式字符,就是中文显示为一个竖立长方形框框里面有四个数字或字母,请看下图中中文,日文和韩文的显示就知道了: 为什么会遇到这个问题? 系统不支持中文,日文和韩文字体. 如何解决: 安装中文字体 ...

  9. C# 输出pdf文件流在页面上显示

    1 不调用itextsharp.dll的操作 /// <summary>        /// 生成pdf流        /// </summary>        /// ...

随机推荐

  1. Your intuition 你的直觉

    If you’re thinking just like everyone else, you aren’t really thinking. Follow your intuition. Do wh ...

  2. git push :推送本地更改到远程仓库的三种模式

    摘要:由于在git push过程中,no-fast-forward 的push会被拒绝,如何解决git push失败的问题?这里面有三种方法,分别会形成merge形式的提交历史,线性形式的提交历史,覆 ...

  3. DKIM对发送邮件的好处及使用方法

    关于DKIM: What is DKIM? 简单的来说dkim有益于增加邮件服务供应商中的反垃圾邮件系统评分,减少邮件内容被评为垃圾邮件的概率. 但使用它不等同于不会被评为垃圾邮件.另外,邮件的发送次 ...

  4. Android 6.0 权限请求

    在申请权限之前一定要在清单配置文件中添加该权限private static final int MY_PERMISSIONS_REQUEST_RECORD_AUDIO = 1; //随便定义 publ ...

  5. Ubuntu14 sudo apt-get install apt-show-versions出错

    vmware安装ubuntu后,sudo apt-get install apt-show-versions出现问题 E: Unable to locate package apt-show-vers ...

  6. [Linux系统]查看内存的几种方式

    1. cat /proc/meminfo 2.free -m3.vmstat -s4.ps命令可以实时的显示各个进程的内存使用情况.Reported memory usage information ...

  7. FireDAC 连接access MDB数据库的方法

    Use Cases Open the Microsoft Access database. DriverID=MSAcc Database=c:\mydata.mdb Open the Microso ...

  8. Arduino学习经验(一)之解决舵机库和pwm输出冲突

    一.前言 最近在公司学习Arduino uno ,用它实现小车超声波避障功能.实现的功能很简单,就是在小车前方挂一个超声波模块,当碰到障碍物时,会通过舵机进行摆头,判断两边的距离,进行左右转弯.但是碰 ...

  9. python 学习笔记十五 django基础

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  10. 【前端】js代码模拟用户键盘鼠标输入

    js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...