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

随机推荐

SQL数据库各种查询建表插入集合-待续持续更新
创建表 drop table student; DROP table Course; DROP table sc; CREATE TABLE student ( sid integer PRIMARY ...
Jetpack系列：LiveData入门级使用方法
Android APP开发中,开发者们都想有一个公共的组件,可以实现后台数据的监听,同时实时更新到UI进行显示,从而大大简化开发过程.Google针对这一开发需求,提供了Jetpack LiveDat ...
redis分布式锁-基本概念与实现方式对比
1.redis中使用WATCH实现锁机制,是最次之的方式.WATCH只会在数据被其他客户端抢先修改了的情况下,“通知”执行了这个命令的客户端,而不会阻止其他客户端对数据进行修改.此类锁成为“乐观锁” ...
maven scope属性说明
一.scope属性: 依赖范围控制哪些依赖在哪些classpath 中可用,哪些依赖包含在一个应用中. compile (编译) compile是默认的范围:如果没有提供一个范围,那该依赖的范围就是编 ...
痞子衡嵌入式：史上最强i.MX RT学习资源汇总(持续更新中...)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MX RT学习资源. 类别资源简介官方汇总 i.MXRT产品主页恩智浦官方i.MXRT产品主页,最权威的资料都在这里,参考手 ...
python openpyxl内存不主动释放 ——关闭Excel工作簿后内存依旧（MemoryError）
在openpyxl对Excel读写操作过程中,发现内存没有马上释放,如果得多次读取大文件,内存爪机,后续代码就无法运行. 尝试:各种wb.save()或者with open等途径无法解决. 发现:因为 ...
Kafka 学习笔记之 Producer/Consumer (Scala)
既然Kafka使用Scala写的,最近也在慢慢学习Scala的语法,虽然还比较生疏,但是还是想尝试下用Scala实现Producer和Consumer,并且用HashPartitioner实现消息根据 ...
1.Eclipse下载、常用配置、快捷键
Eclipse官网下载:https://www.eclipse.org/downloads/packages/ 自动补全位置:Eclipse——Window——Perferences——Java—— ...
时间复杂度————被list.insert坑了
今天被一个很简单的坑到了,还想了很长时间,insert 函数,真的知道它内部执行的操作吗? 开始其实是在看一本算法的书,书里面给了两段工作内容差不多的伪代码第一段如下: data = [] whil ...
UVA - 1160　X-Plosives
A secret service developed a new kind of explosive that attain its volatile property only when a spe ...

video2

video2的更多相关文章

随机推荐

热门专题