<!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. Linux-----centos6.2---安装Linux的流程

      1.安装命令 # yum install mysql-server mysql 2.查看是否安装正确 # chkconfig --list mysqld 3.启动 (1).启动服务: # serv ...

  2. 【Dgango】模版

    继承 ① extends用法:只继承一个模版 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. CVPR 2019 论文解读 | 小样本域适应的目标检测

    引文 ​ 最近笔者也在寻找目标检测的其他方向,一般可以继续挖掘的方向是从目标检测的数据入手,困难样本的目标检测,如检测物体被遮挡,极小人脸检测,亦或者数据样本不足的算法.这里笔者介绍一篇小样本(few ...

  4. .net core 使用Rotativa创建PDF文档

    一.下载Rotaiva 工具  = >  NuGet包管理器  = >  管理解决方案的NuGet程序包 在打开的页面中搜索 Rotativa.AspNetCore 如下图: 选中红框的记 ...

  5. IT架构师技术知识图谱

    互联网上“最全的技术图谱”,记录下.来源:http://developer.51cto.com/art/201708/548757.htm 1 1.1 架构师图谱 1.2 Java架构师图谱 1.3 ...

  6. 前端使用lodop插件进行打印设置

    先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面. 本章使用Lodop插件进行打印设置,实现打印机 ...

  7. Oracle 存储过程判断语句正确写法和时间查询方法

    判断语句:if 条件 then   if  条件  then ************;   elsif  条件  then  ************;   elsif 条件  then ***** ...

  8. MongoDB 学习笔记之 地理空间索引入门

    地理空间索引: 地理空间索引,可用于处理基于地理位置的查询. Point:用于指定所在的具体位置,我们以restaurants为例: db.restaurants.insert({name: &quo ...

  9. git checkout 提示 “error: The following untracked working tree files would be overwritten by checkout” 解决

    问题描述 Windows 或者 macOS 操作系统中,文件名是不区分大小写的.对于已经提交到仓库中的文件修改文件名的大小写,然后又用 git rm 命令将老文件从 Git 仓库删除掉,并保存下新的文 ...

  10. Flutter中TabBarView切换状态保存

    TabBarView 类似于Android中的viewPager,但是默认是没有实现切换分页状态保存的.估计是出于节约内存的原因吧. 发现这个问题的时候,搜索了一下全网.大致就两种解决方案,1是修改源 ...