首页 > 编程 > HTML > 正文

HTML5 video播放器全屏(fullScreen)方!法实例

2020-03-24 15:49:22
字体：大 中 小
来源：转载
供稿：网友

&n

搞笑图片大全[www.62-6.com/1/pic/]bsp;HTML5 video播放器全屏(fullScreen)方法实例

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多

在html5中，全屏方法可以适用于很多html 元素，不仅仅是video



代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>全屏问题</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta http-equiv="imagetoolbar" content="no"/>

<meta name="apple-mobile-web-app-capable" content="yes"/>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<style type="text/css">

*{

padding: 0px;

margin: 0px;

}



body div.videobox{

width: 400px;

height: 320px;

margin: 100px auto;

background-color:#000;

}



body div.videobox video.video

{

width: 100%;

height: 100%;

}



:-webkit-full-screen {



}



:-moz-full-screen {



}



:-ms-fullscreen {



}



:-o-fullscreen {



}



:full-screen {



}



:fullscreen {



}



:-webkit-full-screen video {

width: 100%;

height: 100%;

}

:-moz-full-screen video{

width: 100%;

height: 100%;

}

</style>

</head>

<body>





<div id="videobox">



<video controls="controls" preload="preload" id="video" poster="poster.jpg">

<source src="./movie.ogg" type="video/ogg" />

<source src="./movie.mp4" type="video/mp4" />

<source src="./movie.webm" type="video/webm" />

<object data="./movie.mp4" width="100%" height="100%">

<embed width="100%" height="100%" src="./movie.swf" />

</object>



</video>

<button id="fullScreenBtn">全屏</button>

</div>





<script type="text/javascript">



//反射調用

var invokeFieldOrMethod = function(element, method)

{

var usablePrefixMethod;

["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {

if (usablePrefixMethod) return;

if (prefix === "") {

// 无前缀，方法首字母小写

method = method.slice(0,1).toLowerCase() + method.slice(1);

}

var typePrefixMethod = typeof element[prefix + method];

if (typePrefixMethod + "" !== "undefined") {

if (typePrefixMethod === "function") {

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html5 output标签是什么意思？html5 output标签的使用方法

下一篇：HTML5新增标签和属性简介

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格式教程...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

陌陌成立文化传播新公司 联合创始人雷小亮任法定代表人
2020-03-25 12:47:38
美团云5月31日起停止对用户服务
2020-03-22 13:00:36
中国移动2019年净利润1066亿元 超出预期
2020-03-19 18:53:05
国内油价重回“5元时代” 92号汽油每升下调0.80元
2020-03-18 19:35:57
腾讯在天津成立新公司 斥资2亿元人民币
2020-03-18 19:32:46
软银集团或放弃收购WeWork 30亿美元收购要约计划告吹
2020-03-18 19:30:20

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2020 VEVB.COM. All Rights Reserved.武林网 版权所有