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. Html的智能表单

    -新的输入类型 -email -url -number -range -Date pickers ( date ,month ,week, time , datetime ,datetime-loca ...

  2. Ruby中 Include, Extend, Import, Require 的使用区别

    Include 如下例当你Include一个模块到某个类时, 相当于把模块中定义的方法插入到类中.它允许使用 mixin.它用来 DRY 你的代码, 避免重复.例如, 当你有多个类时, 需要相同的函数 ...

  3. js计算字符串出现个数

    //valueStr 整个字符串 nameStr待切割的字符串 function GetPartStrCount (valueStr, partStr) { //debugger valueStr = ...

  4. CSS3 笔记四（Transforms/Transition/Animations）

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  5. Bash:-:-获取未来40天的日期

    <---获取40天日期数组---> ..};do echo "$(date --date=''${i}' days ago' "+%Y%m%d")" ...

  6. 大理石在哪里UVa 10474

    我自己写的代码 #include<iostream>#include<algorithm>using namespace std;int main(){    int N,a[ ...

  7. 【Spring】简单的Spring AOP注解示例

    引入相关包: <properties> <spring.version>3.0.5.RELEASE</spring.version> <aspectj.ver ...

  8. 小识Tableau

    关于 Tableau Tableau 帮助人们将数据转化为可以付诸行动的见解.探索无所不能的可视化分析.只需点击几下即可构建仪表板,进行即兴分析. Tableau与R对比: 1.从开发的角度讲,Tab ...

  9. 简单的方式优化mysql

    参考博客 自己笔记本上向mysql导入txt数据,有一个table导入了将近4个小时,而且多个table之间都是相互之间存在关系的,所以做联合查询的时候你会发现问题会十分的多,我之前联合查询两个表就死 ...

  10. divmod(a,b)函数是实现a除以b，然后返回商与余数的元组、eval可以执行一个字符串形式的表达式、exec语句用来执行储存在字符串或文件中的Python语句

    #!/usr/bin/env python a = 10/3 print(a) #divmod计算商与余数 r = divmod(10001,20) print(r) #eval可以执行一个字符串形式 ...