首页 > 其他分享 >video控件去掉播放条

video控件去掉播放条

时间:2023-06-07 11:34:44浏览次数:34  
标签:控件 视频 controls video 播放 属性

两种方法如下:

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:设置视频播放器的宽度。

标签:控件,视频,controls,video,播放,属性
From: https://www.cnblogs.com/wj204/p/17462870.html

相关文章

  • H.265流媒体视频播放器EasyPlayer在ios设备上播放出现画面拉伸情况的优化
    EasyPlayer流媒体视频播放器可支持H.264与H.265,性能稳定、播放流畅,能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。在EasyPlayer的使用过程中,有用户反馈,在ios设备中播放视频出现了画面被强制拉伸并且无法调整至......
  • Android音频收集和播放
    一、文章说明这篇文章主要讲述的是Android中使用AudioRecord类和AudioTrack类来进行语音采集和播放相关的知识,在这篇文章中首先介绍的是有关声音的一些概念性知识,然后介绍声音的采集,之后再讲述Android上回声消除的相关步骤,最后介绍的是声音的播放。二、概念性知识点在这里关于......
  • H.265流媒体视频播放器EasyPlayer在ios设备上播放出现画面拉伸情况的优化
    EasyPlayer流媒体视频播放器可支持H.264与H.265,性能稳定、播放流畅,能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。在EasyPlayer的使用过程中,有用户反馈,在ios设备中播放视频出现了画面被强制拉伸并且无法调整至标准......
  • js-audio-recorder录音播放波形图
    安装:npmijs-audio-recorder调用:importRecorderfrom'js-audio-recorder';letrecorder=newRecorder();基本功能看官网:https://recorder-api.zhuyuntao.cn/播放时的波形图,一开始没搞出来,后面看了人家的例子,才弄好,这里记录一下:首先,要用到两个canvas标签<canvas......
  • Flutter音频播放之just_audio
    just_audio的使用just_audio,它是一个用于播放音频的Flutter插件。安装和导入just_audio要使用just_audio库,需要将其添加到项目的pubspec.yaml文件中:dependencies:just_audio:^0.9.34然后运行以下命令以安装该库:flutterpubget要使用just_audio,需要在代码中......
  • Python tkinter 树形列表控件(Treeview)的使用简单举例,建立一个treeview
     importtkinterastkfromtkinter.ttkimportTreeview#创建tkinter应用程序窗口root=tk.Tk()#设置窗口大小和位置root.geometry('500x300+400+300')#不允许改变窗口大小root.resizable(False,False)#设置窗口标题root.title('通信录管理系统')#使用Tree......
  • QQ空间自动播放youku视频
    在百度空间或QQ空间中文文章中的播放器上加上一段视频,每次都要手动点击才能播放,很是不爽,http://tv.mofile.com/网站上的视频提供了自动播放代码,但是其它视频网站都没有提供怎么办呢?其实很简单,我们只要加上自动播放的参数:isAutoPlay=true       参数使用&连接,末尾使用#.mp3......
  • 在DevExpress的GridView的列中,使用RepositoryItemSearchLookUpEdit控件实现产品列表信
    有时候,我们为了方便,我们往往使用扩展函数的代码方式创建很多GridView的操作功能,如在随笔《在DevExpress中使用BandedGridView表格实现多行表头的处理》中介绍过多行表头的创建及绑定处理,在《基于DevExpress的GridControl实现的一些界面处理功能》也介绍了一些特殊的展示效果,本篇随......
  • 视频播放 video标签的使用
    vue3.0项目中,引入了videojs,使用video。npminstall--savevideo.jsvideo标签<videoid="my-video"class="video-js"controlspreload="auto"poster="/img/news/news_index_16.png"muted="true"width="800&quo......
  • WPF.Basic.样式基础及控件模板
    合集-WPF从入门到放弃(3)1.WPF入门笔记-01-入门基础以及常用布局05-202.WPF入门笔记-02-布局综合应用05-283.WPF入门笔记-03-样式基础及控件模板06-03收起......