<!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>

video3的更多相关文章

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

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

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

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

  3. 使用HTML 5捕捉音频与视频信息

    长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点.许多年来,我们一直依赖浏览器插件来实现这个需求. 在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocat ...

  4. Flowplayer-playlist

    SOURCE URL: https://flowplayer.org/docs/playlist.html HTML layout Here is a typical setup for a play ...

  5. mencoder mencoder 安装使用及常用参数

    mencoder 安装及使用 1.安装:            参考:http://hi.baidu.com/putword/item/e5910a187d2aed14e2f9867f 2.合并视频: ...

  6. AgileEAS.NET SOA中间件平台/敏捷软件开发平台

    AgileEAS.NET SOA中间件平台/敏捷软件开发平台 最新下载 一.前言 AgileEAS.NET SOA中间件平台,简称EAS.NET,是基于敏捷并行开发思想和Microsoft .Net构 ...

  7. NET 2.0(C#)调用ffmpeg处理视频的方法

    另外:ffmpeg的net封装库 http://www.intuitive.sk/fflib/ NET 2.0 调用FFMPEG,并异步读取输出信息的代码...public void ConvertV ...

  8. v4l2视频采集摄像头

    v4l2 --是Linux内核中关于视频设备的内核驱动框架,为上层访问底层的视频设备提供了统一的接口./dev/vidioX 1.打开设备文件 fd=open("/dev/video3&qu ...

  9. DAVINCI DM6446 开发攻略——V4L2视频驱动和应用分析

     针对DAVINCI DM6446平台,网络上也有很多网友写了V4L2的驱动,但只是解析Montavista linux-2.6.10 V4L2的原理.结构和函数,深度不够.本文决定把Montavis ...

随机推荐

  1. Redis-->Ubutn上的安装教程

    Redis 安装 当前redis最新稳定版本是4.0.9 以下步骤可以跳过 最新稳定版本下载链接:http://download.redis.io/releases/redis-4.0.9.tar.g ...

  2. 【ASP.NET 基础】WCF入门教程一（什么是WCF）？

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  3. 使用 chart 部署 skywalking

    使用 chart 部署 skywalking 本文主要讲述的是如何使用 Helm Charts 将 SkyWalking 部署到 Kubernetes 集群中,相关文档可以参考skywalking-k ...

  4. golang 你所不知道的 log 和 fmt

    直接点说,就是由于fmt 是线程不安全的, 如果你在多协程场景下使用fmt打印信息可能会得到乱序的结果 就是说 不按代码里的顺序打印. 下面看示例 代码示例 golang fmt 多线程 乱序: fu ...

  5. 针对永久不过期的key 批量设置过期时间

    问题需求: redis内存暴增,后来发现有很多设置永久不过期. 解决:查找出来之后针对前缀批量设置过期时间 (过期时间与开发沟通 保证服务不受影响) 来源于网上杨一的代码 正好解决了我遇到的问题 在这 ...

  6. ng-cli新建项目

    tip:所有的命令是红色标签 , 链接为蓝色标签 使用ng-cli创建新的项目一般需要安装一些新的东西后才可以进行创建成功 1.需要先安装node.js  链接: https://nodejs.org ...

  7. Pycharm 快捷键大全 2019.2.3

    在Pycharm中打开Help->Keymap Reference可查看默认快捷键帮助文档,文档为PDF格式,位于安装路径的help文件夹中,包含MAC操作系统适用的帮助文档. 下图为2019. ...

  8. Ubuntu16.04常用C++库安装及环境配置

    1. 常用非线性求解库Ceres #================================================================================== ...

  9. C# 创建自定义配置节点1

    转载:http://www.educity.cn/develop/495003.html 在.Net应用程序中我们经常看到VS为我们生成的项目工程中都会含有app.config或者web.connfi ...

  10. django html母版

    08.12自我总结 django母版 一.母版写的格式 在需要导入的地方写 {% block 名字定义 %} {% endblock %} 二.导入模板 {% extends 'FUCK.html' ...