video2

<!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的更多相关文章

HTML5- Canvas入门（五）
今天要介绍的是canvas对图形对象的操作,包括图像.视频绘制,和操作像素对象的方法. 图片/视频的绘制在canvas中,我们可以通过 drawImage() 的方法来绘制图片或视频文件,其语法为: ...
MediaElement.js之浏览器跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...
【django】京东等大型网站的混合搜索是怎么实现的？
混合搜索在各大网站如京东.淘宝都有应用,他们的原理都是什么呢?本博文将为你介绍它们的实现过程. 混合搜索的原理,用一句话来说就是:关键字id进行拼接. 混合搜索示例: 数据库设计: 视频方向: cla ...
laravel框架总结(十二) -- 关联关系
这里我们users表对应的模型类名是users,大家特意注意下和user取名的不同 1.一对一关系 1>表A和表B的记录一一对应,比如一个用户对应一个社交账号数据表的设计如下: 2> ...
C# 字符串操作类
using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...
PR视屏剪切
一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性,且可以与Adobe公司推出的 ...
(转) Deep Learning Resources
转自:http://www.jeremydjacksonphd.com/category/deep-learning/ Deep Learning Resources Posted on May 13 ...
Shell文本处理 - 分割合并与过滤
sort分类操作示例文件 Boys in Company C:HK:192:2192 Alien:HK:119:1982 The Hill:KL:63:2972 Aliens:HK:532:4892 ...
手势估计- Hand Pose Estimation
http://blog.csdn.net/myarrow/article/details/51933651 1. 目前进展 1.1 相关资料 1)HANDS CVPR 2016 2 ...

随机推荐

Flutter免费（视频）教程汇总
Flutter学习导航 Flutter简介: Flutter可以轻松快速地构建漂亮的移动应用程序. Flutter是谷歌的移动应用SDK,用于短时间内在iOS和Android上制作高质量的原生界面应用 ...
【ADO.NET基础-Login】带验证码验证的登录界面（用于简单的基础学习）
以下代码如果有不对或者不妥之处,还望大神们指点一二或者有同学者有问题或建议,一定要提出来,共同探讨小弟在此感谢! 前台代码: <!DOCTYPE html> <html xmln ...
使用Ingress来负载分发微服务
目录使用Ingress来负载分发微服务 Demo规划准备Demo并完成部署创建部署(Deployment)资源创建服务(Service)资源创建Ingress资源并配置转发规则 ...
mysql创建用户和权限管理
一权限管理我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建 ...
SpringBoot导入jsp依赖始终报错
先粘出我自己的pom代码: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...
Flume 知识点（六）Flume 的监控
简述使用 Flume 实时收集日志的过程中,尽管有事务机制保证数据不丢失,但仍然需要时刻关注 Source.Channel.Sink 之间的消息传输是否正常. 比如,SouceChannel 传输了 ...
[JavaScript] 《JavaScript高级程序设计》笔记
1.|| 和 && 这两个逻辑运算符和c#是类似的,都是惰性的计算 a() || b() 若a()为真返回a()的结果,此时b()不计算: a()为假则返回b() a() &am ...
selenium + python + firefox 测试环境的搭建与配置
对于做UI自动化,如果是纯编写一段自动化测试程序,那么后续的维护成本会较高.这种情况下,借助 selenium 这款自动化系测试工具,辅助于自己编写部分脚本,将是个不错的选择.selenium 本身支 ...
数据的异构实战（一）基于canal进行日志的订阅和转换
什么是数据的异构处理.简单说就是为了满足我们业务的扩展性,将数据从某种特定的格式转换到新的数据格式中来. 为什么会有这种需求出现呢? 传统的企业中,主要都是将数据存储在了关系型数据库中,例如说MySQ ...
MongoDB系列（一）：初步理解
一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 1.易用性 1)MongoDB是一款面向文档的数据库,而不是关系型数据库,因此而有着更好的扩展性. 2)通过在文档中嵌入文档和数组, ...

video2

video2的更多相关文章

随机推荐

热门专题