<!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. mysql修改数据库的存储引擎(InnoDB)

    查看当前的存储引擎 show engines; 基本的差别:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不 ...

  2. 使用Hexo开源博客系统，轻松搭建你的个人博客（2）- 配置篇

    上一章节,我们介绍了Hexo的基础搭建,搭建完大家一定发现,是英文版本的,并且页面有点丑陋.这一章节,就来跟大家介绍Hexo的配置和主题的设置. 站点信息 上一章有跟大家提到过_config.yml这 ...

  3. phaser学习总结之phaser入门教程

    前言 最近公司做项目的时候正好使用到phaser,在这里做一下自己整理出来的一些心得,方便大家参考,phaser这一个游戏引擎通常是做2d游戏的,入门也非常简单,只需你会一点的javascript,但 ...

  4. .Net Core与Vue.js模块化前后端分离快速开发解决方案(NetModular)

    NetModular是什么? NetModular不仅仅是一个框架,它也是一整套的模块化与前后端分离的快速开发的解决方案,目标是致力于开箱即用,让开发人员完全专注于业务开发,不需要关心底层封装和实现. ...

  5. K8s 从懵圈到熟练 – 镜像拉取这件小事

    作者 | 声东 阿里云售后技术专家 导读:相比 K8s 集群的其他功能,私有镜像的自动拉取,看起来可能是比较简单的.而镜像拉取失败,大多数情况下都和权限有关.所以,在处理相关问题的时候,我们往往会轻松 ...

  6. 你所不知道的TIME_WAIT和CLOSE_WAIT

    你遇到过TIME_WAIT的问题吗? 我相信很多都遇到过这个问题.一旦有用户在喊:网络变慢了.第一件事情就是,netstat -a | grep TIME_WAIT | wc -l 一下.哎呀妈呀,几 ...

  7. 六、springboot 简单优雅是实现短信服务

    前言 上一篇讲了 springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所 ...

  8. 解读C#中的正则表达式

    本文摘自LTP.NET知识库. regexp规则类包含在System.Text.RegularExpressions.dll文件中,在对应用软件进行编译时你必须引用这个文件: System.Text. ...

  9. 最简单的ArcGIS Engine应用程序（下）

    在中篇我们讲到使用OpenFileDialog控件可以添加shp文件.(最简单的ArcGIS Engine应用程序(中)) 添加lyr文件的操作也是大同小异的. using System; using ...

  10. 微信小程序发起请求

    一.示例代码 wx.request({ url: 'test.php', // 仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-ty ...