在移动端怎么将HTML5中的video标签的控件去掉或者隐藏

html-css020

在移动端怎么将HTML5中的video标签的控件去掉或者隐藏,第1张

看看这个或许对你有帮助奥!

控制条始终是最下方的,可不可以让视频的尺寸放大些,将控制条顶到浏览窗口外面,就看不到了嘛,于是我将视频宽高放大到120%-----控件条神奇的‘消失’了(其实是顶到视窗外面了),惊喜万分啊。

<div class="videobox">

<video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4"></video>

</div>

初始样式表如下:

html,body

{

padding:

0

margin:

0

width:

100%

height:

100%

-webkit-user-select:

none

user-select:

none

overflow:

hidden

}.videobox

{

width:

100%

height:

100%

position:

absolute

left:

0

top:

0

overflow:

hidden

}video

{width:

1pxdisplay:

blcok}/*

注:html,body里的overflow:hidden,非常重要,不能省。

因为微信android的播放器是脱离DOM结构的,也不会响应click、touch等事件。

如果视频尺寸大了,会产生滚动条,必须在html和body加overflow:hidden,

在videobox加没用的。

*/

当视频要播放时改变video的宽度(高度会等比缩放,即使自定义高度也是没用的,会被忽略)

var

video

=

document.querySelector('#mainvideo')

var

videobox

=

document.querySelector('.videobox')

//播放时改变外层包裹的宽度,使video宽度增加,

//相应高度也增加了,播放器控件被挤下去,配合overflow:hidden

//控件看不见也触摸不到了

var

setVideoStyle

=

function

(){

videobox.style.width

=

'120%'

videobox.style.left

=

'-10%'

video.style.width

=

'100%'

}

当然上面这样写参杂了一些需求逻辑,也可以直接样式表就width:120%,或者更大;这个根据自己的需要来,但基本思路就是将播放器控件顶出视窗之外,达到一种‘去除’、‘消失’的效果。连‘小窗’字样也被顶出去了,用过android或测试过的同学都知道点了小窗后会怎样....(原版的即使去掉了播放器,但小窗字样还在,不能算完全的隐藏播放控件吧)

相应产生的一些问题的解决办法:

1,视频被放大了,画面会被截掉一部分怎么办?

这个可以在视频输出的时候两边和下边留一些留白,即留白可以没用画面黑色底,但又属于视频尺寸的一部分,放视频放大后,将主体画面置满视窗,被挤到外面都是留白的即可。

2,视频播放完毕后会中间自动出现播放控件按钮

如果确实不想在播放完是出现一个按钮,哪怕只有零点几秒,就把视频remove掉,可以使用timeupdate监听视频播放,用video.duration-video.currentTime的差值判断是否快要结束了,在结束前零点几秒提前remove掉。

3,要是不是全屏视频怎么搞?

可以,思路是一样的,将视频控件顶出外层的包裹层,利用overflow:hidden。只是全屏的外层包裹是body而已。

哦了,终于可以搞一个全屏视频伪装的东西了。

HTML网页中插入视频方法:

1.用object 标签

<object id="MediaPlayer" width="478" height="300" codebase="<a href="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf." target="_blank">http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.</a>

cab#Version=6,1,5,217" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player components..." classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" VIEWASTEXT>

          <param name="DisplayBackColor" value="0">

          <param name="DisplayForeColor" value="16777215">

          <param name="DisplayMode" value="0">

          <param name="DisplaySize" value="-1">

          <param name="Filename" value="mms://www-xxx-com/视频文件.wmv">

          <!-- 此处设置播放的视频连接 -->

          <param name="ShowControls" value="0">

        </object>

2.用html标签video

<video src="movie.ogg" controls="controls">

</video>

html中添加视频主要有三个标签embed、object和video,我们这里说最常用的video标签都含有哪些属性:

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。

controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。

heightpixels设置视频播放器的高度。

looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。

mutedmuted如果出现该属性,视频的音频输出为静音。

posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。

preloadauto、metadata、none如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

srcURL要播放的视频的 URL。

widthpixels设置视频播放器的宽度。