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. [转]Android SDK更新 Connection to http://dl-ssl.google.com refused 解决方法

    问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...

  2. RobotFramework中加载自定义python包中的library（一个py文件中有多个类）

    结构如下: appsdk\ appsdk.py(这里面有多个类,包括appsdk,appsdksync等类) __init__.py ... ① 有个appsdk的文件夹(符合python包的定义) ...

  3. base64与byte[]之间转换

    主要是根据BASE64Encoder 和BASE64Decoder 进行操作实现,具体例子如下: BASE64Encoder encode = new BASE64Encoder(); //将byte ...

  4. JavaScript中正则表达式test()、exec()、match() 方法

    转自http://www.cnblogs.com/jane-y/articles/5183859.html 1.test test 返回 Boolean,查找对应的字符串中是否存在模式.var str ...

  5. 山东省第七届ACM省赛------Triple Nim

    Triple Nim Time Limit: 2000MS Memory limit: 65536K 题目描述 Alice and Bob are always playing all kinds o ...

  6. POSTMAN as debugger for integration APPs

    Chrome Menu: Window > Extensions > Postman - REST Client 0.8.4.10 起个标题,有空总结一下一个经验,关于Netsuite i ...

  7. HDU5795A Simple Nim SG定理

    A Simple Nim Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  8. 修改C:\WINDOWS\system32\drivers\etc\hosts 文件有什么作用

    host是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会 ...

  9. 【leetcode❤python】 278. First Bad Version

    #-*- coding: UTF-8 -*-# The isBadVersion API is already defined for you.# @param version, an integer ...

  10. XML创建与解析常用方法介绍

    XML解析方式介绍 1.DOM4J(Document Object Model for Java)      虽然DOM4J代表了完全独立的开发结果,但最初,它是JDOM的一种智能分支.它合并了许多超 ...