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

html-css032

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

两种方法如下:

1、用css隐藏video视频播放控件:

<style type="text/css">

video::-webkit-media-controls{

display:none !important

}

</style>

css隐藏原生html5 video controls,这么设置后即使没有设置controls为false,native controls也不会再出现。其他的按钮,包括播放按钮、播放进度条、静音按钮、音量条等,都可以像全屏按钮一样自定义样式。不止是隐藏。

2、用js隐藏video视频播放控件:

<script type="text/javascript">

var video=document.getElementById("video")

video.controls=false

</script>

HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候需要使用Dom来进行自定义的一些操作和控制。

扩展资料:

HTML5 video标签中的新属性:

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

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

3、height:设置视频播放器的高度。

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

5、muted:规定视频的音频输出应该被静音。

6、poster:规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

7、preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。

8、src:要播放的视频的 URL。

9、width:设置视频播放器的宽度。

参考资料来源:百度百科-html5 video

用FLASH插入

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="50" height="50">

<param name="movie" value="你的swf链接地址" />

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="6.0.65.0" />

<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->

<param name="expressinstall" value="Scripts/expressInstall.swf" />

<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->

<!--[if !IE]>-->

<object type="application/x-shockwave-flash" data="你的SWF链接地址" width="50" height="50">

<!--<![endif]-->

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />

<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->

<div>

<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33" /></a></p>

</div>

<!--[if !IE]>-->

</object>

<!--<![endif]-->

</object>

<script type="text/javascript">

swfobject.registerObject("FlashID")

</script>