1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .div2{
  8. width: 500px;
  9. height: 500px;
  10. background: #87CEEB;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <video width="600" height="" src="img/shiping.mp4" poster="img/timg.jpg" controls="controls"></video>
  16. <button>播放</button>
  17. <button class="fullscreen">全屏</button>
  18. <img src="img/timg.jpg"/>
  19. <div class="div2">
  20. <h1>wxihuanni</h1>
  21. </div>
  22. <script type="text/javascript">
  23. var v1=document.querySelector('video')
  24. document.querySelector('button').onclick=function(){
  25. v1.play()
  26. }
  27. document.querySelector('.fullscreen').onclick=function(){
  28. v1.webkitRequestFullScreen()
  29. }
  30. document.querySelector('img').onclick=function(){
  31. document.querySelector('img').webkitRequestFullScreen()
  32. }
  33. document.querySelector('.div2').onclick=function(){
  34. document.querySelector('.div2').webkitRequestFullScreen()
  35. }
  36. </script>g
  37. </body>
  38. </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. Guava的常用方法示例

    Guava Maven Dependency <dependency> <groupId>com.google.guava</groupId> <artifa ...

  2. redis-自动补全

    自动补全实现方式有两种: 第一种:数据量非常小时,程序从redis中获取数据后,在程序中排序:redis只作为数据存储用: 第二种:数据量较大时,直接在redis中排序,并返回自动补全的数据. 第三种 ...

  3. layui-table 对表格数据进行处理之后的排序问题

    使用layui table过程中,将某一列的数据格式进行转换,或者将0/1状态改为是/否,或者将数字改为星星评分显示的时候都会遇到一个问题,我的表格数据转换成其他形式,同时设置了sort:true,此 ...

  4. 报表统计——java实现查询某年12个月数据,没数据补0

    一般图表绘制例如echarts等,返回数据格式都大同小异.重点是利用sql或者java实现数据格式的转型,接下来是关键部分: 1.mapper层sql语句,返回统计好的月份与对应月份的数据. < ...

  5. 虚拟现实研究经典问卷Presence Questionnaire (PQ) 详细介绍

    虚拟现实(VR)是一种沉浸式体验,它的作用就是将用户完全包裹在一个人为构建出的(数字)虚拟世界中,让用户在这个新环境中得到不一样的体验,或完成一些现实中不能完成的任务.所以让体验者相信“我身处此中”非 ...

  6. 什么是VR中的vection?

    Vection是VR领域的一个专有名词,其义指“在虚拟现实中给人带来‘移动’(self-motion)感觉的认知因素”1.也就是说,vection就是指那些给玩家带来“我正在这个虚拟环境中移动”这种感 ...

  7. python pytesseracct WinError2

    接上一个3步图像识别,本来已经在两台电脑同样的操作3步都可以识别出验证码,但是今天在新电脑同样的步骤却出现了winerror2,泪崩. 一样的配方,不一样的结果. 后来发现是调用不到tesseract ...

  8. python - json模块使用 / 快速入门

    json基本格式 """ json格式 -> [{}, {}]: [{ "name": "Bob", "gende ...

  9. beego之操作model

    beego之操作model 1.环境配置 1>.下载安装orm go get github.com/astaxie/beego/orm 默认安装路径在gopath路径下,可使用go env查看路 ...

  10. python编程基础之八

    位运算符 内存: 1 bit ----b      1Byte----B 1Byte = 8bit 1K = 1024Byte 1M = 1024KB 1G = 1024M 1T = 1024G 二级 ...