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. C++文件流类与文件流对象

    文件流是以外存文件为输入输出对象的数据流.输出文件流是从内存流向外存文件的数据,输入文件流是从外存文件流向内存的数据.每一个文件流都有一个内存缓冲区与之对应. 请区分文件流与文件的概念,不用误以为文件 ...

  2. rabbimq连接问题处理

    今天遇到一个rabbitmq的连接问题,之前自己写代码测试的时候并没有出现过,所以做个小总结,由于是其他项目测试部署环境发现的问题,所以一开始排查还是有点坑... 客户端上新建一个rabbitmq的c ...

  3. qt qml 九宫格划指锁屏视图

    九宫格划指锁屏视图Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2015-02 [先看效果] [下载] http://download.csdn. ...

  4. iOS屏幕旋转

    三种方法 需求:全局主要是竖屏 个别界面需要横屏

  5. CURL命令详解

    curl命令是一个强大的网络工具,它能通过http,ftp等方式下载.上传文件.其中curl远不止这些功能,大家可以通过阅读手册获取更多的信息,类似的工具还有wget. curl命令使用了libcur ...

  6. SQL 语句调优 where 条件 数据类型 临时表 索引

    基本原则 避免全表扫描 建立索引 尽量避免向客户端返回大数据量,若数据量过大,应该考虑相应需求是否合理 尽量避免大事务操作,提高系统并发能力 使用基于游标的方法或临时表方法之前,应先寻找基于集的解决方 ...

  7. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  8. JCEF 如何修改右键菜单项（JCEF在右键菜单中添加开发者选项-show dev tools）

    需求: 在界面的右键事件中添加一个打开开发者选项的菜单(Show Dev Tools) 所以我们可以看到的是在界面上右键,会有默认的一些菜单项(前进,后退,打印,查看源码),而这些功能并不一定是我们需 ...

  9. C#数组

    数组是一种数据结构,它包含若干相同类型的变量.数组是使用类型声明的: type[] arrayName; 下面的示例创建一维.多维和交错数组: class TestArraysClass { stat ...

  10. PHP的一些开源项目网站

    https://github.com/wenzhixin/bootstrap-table https://github.com/1000hz/bootstrap-validator