<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div2{

                width: 600px;

                height: 300px;

                background: skyblue;

            }

        </style>

    </head>

    <body>

        <video width="800" 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>helloworld</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>

    </body>

</html>

video1的更多相关文章

  1. HTML5- Canvas入门（五）

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

  2. HTML5-video标签-实现点击预览图播放或暂停视频

    HTML5-video标签-实现点击预览图播放或暂停视频 刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性.这时我才真的发现到html5和css3的强大. 之前关 ...

  3. html视频播放器的代码 及其参数详解

    播放视频最实用的一段代码是: 程序代码 <"></embed></object> 其他的看参数自己修改吧 .avi格式 代码片断如下: 程序代码 < ...

  4. HTML5 WebSocket

    在WebSocket API中,浏览器和服务器只需要做一个握手动作,然后,浏览器和服务器之间就形成一条快速通道,两者之间就可以直接进行数据传送,这一个功能可以应用到"字幕",自己做 ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. HTML5 音频 <audio>

    HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

  7. HTML5 视频（二） <video> 使用 DOM 进行控制

    HTML5 <video> 使用 DOM 进行控制 一.HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音 ...

  8. H5播放器

    <!DOCTYPE html>  <html>  <body>  <div style="text-align:center">  ...

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

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

随机推荐

  1. 记录ceph两个rbd删除不了的处理过程

    在一个使用的环境发现两个ceph的rbd删除不了,发现两个rbd都是由于残留了watch的信息.在此记录处理过程. 处理方法 [root@node- ~]# rbd -4cce-b39d-709e05 ...

  2. [LeetCode] 824. Goat Latin

    Description A sentence S is given, composed of words separated by spaces. Each word consists of lowe ...

  3. SpringBoot2+Netty打造通俗简版RPC通信框架

    2019-07-19:完成基本RPC通信! 2019-07-22:优化此框架,实现单一长连接! 2019-07-24:继续优化此框架:1.增加服务提供注解(带版本号),然后利用Spring框架的在启动 ...

  4. xamarin开发的mac开发小工具集合

    兄弟们我拖控件拖到了mac系统去了, 工具上传到百度网盘,下载地址 链接:https://pan.baidu.com/s/1Q64zoRjE3u66jJnzF8rhww提取码:ljx2 这款工具我是用 ...

  5. vue父子组件钩子函数的执行顺序

    加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...

  6. WampServer配置可局域网访问站点

    一 WampServer3.1.7版本 二 需求:项目开发阶段,服务器还未购买,前端需要调用接口进行测试,于是想到了在本地搭设一个站点,可以局域网内访问 三 先为这个项目单独在本地设置一个端口,比如我 ...

  7. Poco XMLconfiguration 解析xml配置文件

    环境: Centos7 GCC: 7.3.0 准备需要读取的xml文件: <config> <prop1>1.23</prop1> <prop2>2.3 ...

  8. springboot依赖的一些配置：spring-boot-dependencies、spring-boot-starter-parent、io.spring.platform

    springboot里会引入很多springboot starter依赖,这些依赖的版本号统一管理,springboot有几种方案可以选择. 一.spring-boot-dependencies 有两 ...

  9. XSS Payload深入分析整理

    几种加载XSS Payload的不常见标签 众所周知,一种调用JavaScript的方法就是在元素类型上使用事件处理器(Event Handler),通常的一种方法类似: <img src=x ...

  10. Python之selenium+pytesseract 实现识别验证码自动化登录脚本

    今天写自己的爆破靶场WP时候,遇到有验证码的网站除了使用pkav的工具我们同样可以通过py强大的第三方库来实现识别验证码+后台登录爆破,这里做个笔记~~~ 0x01关于selenium seleniu ...