<!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. opencv霍夫变换

    霍夫变换不仅可以找出图片中的直线,也可以找出圆,椭圆,三角形等等,只要你能定义出直线方程,圆形的方程等等. 不得不说,现在网上的各种博客质量真的不行,网上一堆文章,乱TM瞎写,误人子弟.本身自己就没有 ...

  2. Spring MVC-从零开始-@ResponseBody（未完待续）

    Spring MVC-从零开始-@ResponseBody(未完待续)

  3. 应用角度看kafka的术语和功能

    kafka的术语(Terminology) Topic 和Consumer Group Topic 每条发布到 Kafka 集群的消息都有一个类别,这个类别被称为 Topic.(物理上不同 Topic ...

  4. 使用 chart 部署 skywalking

    使用 chart 部署 skywalking 本文主要讲述的是如何使用 Helm Charts 将 SkyWalking 部署到 Kubernetes 集群中,相关文档可以参考skywalking-k ...

  5. Spring IOC（3）----bean实例化

    前面一节说到invokeBeanFactoryPostProcessors方法的调用来注册bean定义,这次来看看finishBeanFactoryInitialization这个方法实例化非懒加载的 ...

  6. 详解PHP魔术函数、魔术常量、预定义常量

    一.魔术函数(13个) 1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__des ...

  7. java第2天:类，对象，封装和构造方法

    1 面向对象简述 将 {1,3,45,56,78,90}转化为[1,3,45,56,78,90] 1-2 方法1:面向过程 代码块 public class test { public static ...

  8. 04-12 scikit-learn库之随机森林

    目录 scikit-learn库之随机森林 一.RandomForestClassifier 1.1 使用场景 1.2 代码 1.3 参数 1.4 属性 1.5 方法 二.RandomForestRe ...

  9. 阿里terway源码分析

    背景 随着公司业务的发展,底层容器环境也需要在各个区域部署,实现多云架构, 使用各个云厂商提供的CNI插件是k8s多云环境下网络架构的一种高效的解法.我们在阿里云的方案中,便用到了阿里云提供的CNI插 ...

  10. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...