<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div2{

                width: 500px;

                height: 500px;

                background: #87CEEB;

            }

        </style>

    </head>

    <body>

        <video width="600" height="" src="img/shiping.mp4" poster="img/timg.jpg" controls="controls"></video>

         <button>播放</button>

         <button class="fullscreen">全屏</button>

         <img src="img/timg.jpg"/>

         <div class="div2">

             <h1>wxihuanni</h1>

         </div>

         <script type="text/javascript">

             var v1=document.querySelector('video')

             document.querySelector('button').onclick=function(){

                 v1.play()

             }

              document.querySelector('.fullscreen').onclick=function(){

                  v1.webkitRequestFullScreen()

              }

             document.querySelector('img').onclick=function(){

                 document.querySelector('img').webkitRequestFullScreen()

             }

             document.querySelector('.div2').onclick=function(){

                 document.querySelector('.div2').webkitRequestFullScreen()

             }

         </script>g

    </body>

</html>

video2的更多相关文章

  1. HTML5- Canvas入门（五）

    今天要介绍的是canvas对图形对象的操作,包括图像.视频绘制,和操作像素对象的方法. 图片/视频的绘制 在canvas中,我们可以通过 drawImage() 的方法来绘制图片或视频文件,其语法为: ...

  2. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  3. 【django】京东等大型网站的混合搜索是怎么实现的？

    混合搜索在各大网站如京东.淘宝都有应用,他们的原理都是什么呢?本博文将为你介绍它们的实现过程. 混合搜索的原理,用一句话来说就是:关键字id进行拼接. 混合搜索示例: 数据库设计: 视频方向: cla ...

  4. laravel框架总结(十二) -- 关联关系

    这里我们users表对应的模型类名是users,大家特意注意下和user取名的不同 1.一对一关系 1>表A和表B的记录一一对应,比如一个用户对应一个社交账号 数据表的设计如下:   2> ...

  5. C# 字符串操作类

    using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...

  6. PR视屏剪切

    一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性,且可以与Adobe公司推出的 ...

  7. (转) Deep Learning Resources

    转自:http://www.jeremydjacksonphd.com/category/deep-learning/ Deep Learning Resources Posted on May 13 ...

  8. Shell文本处理 - 分割合并与过滤

    sort分类操作 示例文件 Boys in Company C:HK:192:2192 Alien:HK:119:1982 The Hill:KL:63:2972 Aliens:HK:532:4892 ...

  9. 手势估计- Hand Pose Estimation

    http://blog.csdn.net/myarrow/article/details/51933651 1. 目前进展 1.1 相关资料      1)HANDS CVPR 2016      2 ...

随机推荐

  1. mybatis - 通用mapper

    title: 玩转spring-boot-mybatis date: 2019-03-11 19:36:57 type: "mybatis" categories: mybatis ...

  2. java基础之泛型对象与json互转

    1. 场景描述 把泛型对象转成字符串放到缓存中,获取后使用有点问题,记录下,有碰到的朋友,参考下. 2. 解决方案 2.1 操作类及说明 /** * @auther: 软件老王 */ public s ...

  3. Tomcat线程参数maxThreads、acceptCount

    一.配置Tomcat/conf/server.xml修改配置 <Connector port="8080" protocol="org.apache.coyote. ...

  4. TCP三次握手和四次握手全过程 为什么要三次握手而不是二次握手？

    三次握手 第一次握手: 客户端发送syn包(syn=x)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次握手: 服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送 ...

  5. Paid Roads POJ - 3411

    A network of m roads connects N cities (numbered from 1 to N). There may be more than one road conne ...

  6. Cocos2d-x入门之旅[2]精灵

    精灵就是cocos是屏幕上移动的对象,能被我们控制,比如我们HelloWorld场景的这个图片就是精灵(Sprite) 怎么才算精灵?你能控制它的,就是一个精灵,否则就只是一个节点(Node) 准确的 ...

  7. Spring Cloud Alibaba（一） 如何使用nacos服务注册和发现

    Nacos介绍 Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮助您更敏捷和容易地构 ...

  8. Faker——生成测试数据的PHP类库

    工作上用的是TP框架,每次测试功能的时候都要手动添加测试数据,词穷起名总是起一些test1.test2这种low到爆炸的用户名,这让我很难受.稍微翻阅了一些资料,发现laravel有一个生成测试数据的 ...

  9. DRF框架中csrf异常

    一.报错信息 "detail": "CSRF Failed: CSRF cookie not set." 二.解决办法 方法一: 在配置文件中配置 REST_F ...

  10. Chrome常见黑客插件及用法

    目录   0x00  Web Developer(网页开发者) 0x01 Firebug Lite for Google Chrome (Firebug精简版) 0x02 d3coder (decod ...