可以通过更改#document片段的CSS来实现这一点，这些是DOM1规范，所有浏览器都支持。
以下解决方案是特定于webkit的
video::-webkit-media-controls-fullscreen-button {
display: none
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
扩展资料：
TML5相对于之前的标准添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。
同时也有一些属性和元素被移除掉，一些元素被重新定义或标准化。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
HTML5标准规范文档对于如何提高浏览器兼容性和SEO，保持代码结构的整洁性，标签元素的正确嵌套，自定义属性以及字符实体的使用，进行了详细的描述，其中也对HTML5移除的一些元素和属性进行了收集整理以供参考。
两种方法如下：
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vlc-video视频播放</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./js/layui/css/layui.css">
</head>
<body>
<!-- BTN -->
<div>
<button class="layui-btn" onclick="playVideo_1(),playVideo_2()">播放</button>
<button class="layui-btn" onclick="zanting_1(),zanting_2()">暂停</button>
<button class="layui-btn" onclick="kuaijin_1(),kuaijin_2()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_1(),kuaitui_2()">快退10秒</button>
</div>
<!-- vlc播放器 -->
<div id="vlc-content_1" class="content">
<embed id="vlcObj_1" src="123.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />
</div>
<!-- h5 video播放器 -->
<div id="video-contnt_1" style="display: none">
<video id="video_1" src="123.mp4" controls width="100%" height="480">
您的浏览器版本太旧，请更新版本或使用其他浏览器
</video>
</div>
<!-- BTN_1 -->
<div>
<button class="layui-btn" onclick="playVideo_1()">播放1</button>
<button class="layui-btn" onclick="zanting_1()">暂停1</button>
<button class="layui-btn" onclick="kuaijin_1()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_1()">快退10秒</button>
</div>
<!-- vlc播放器 -->
<div id="vlc-content_2" class="content">
<embed id="vlcObj_2" src="456.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />
</div>
<!-- h5 video播放器 -->
<div id="video-contnt_2" style="display: none">
<video id="video_2" src="456.mp4" controls width="100%" height="480">
您的浏览器版本太旧，请更新版本或使用其他浏览器
</video>
</div>
<!-- BTN_2 -->
<div>
<button class="layui-btn" onclick="playVideo_2()">播放2</button>
<button class="layui-btn" onclick="zanting_2()">暂停2</button>
<button class="layui-btn" onclick="kuaijin_2()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_2()">快退10秒</button>
</div>
<!-- 播放器公共部分-->
<div>
<select id="beisu">
<option value="0.5">0.5x</option>
<option value="1" selected>1.0x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="2">2.0x</option>
</select>
<script src="./js/jquery-1.8.0.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script>var VIDEO_1 = document.getElementById("video_1")</script>
<script>var VIDEO_2 = document.getElementById("video_2")</script>
<script>var VLC_1 = document.getElementById("vlcObj_1")</script>
<script>var VLC_2 = document.getElementById("vlcObj_2")</script>
</div>
<script>
var layer = ''
var useVlc = getBrowserInfo().indexOf('IE') != -1
layui.use('layer', function () {
layer = layui.layer
(function () {
if (useVlc) { // IE浏览器使用vlc
try {
$("#vlc-content_1").show()
$("#vlc-content_2").show()
} catch (err) {
$("#vlc-content_1").hide()
$("#vlc-content_2").hide()
if (getPlatform() == 'win32') {
layer.confirm('当前浏览器暂未安装视频播放插件，点击确定安装', {
btn: ['确定', '取消']
}, function () {
window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win32.exe')
})
} else if (platform == 'win64') {
layer.confirm('当前浏览器暂未安装视频播放插件，点击确定安装', {
btn: ['确定', '取消']
}, function () {
window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win64.exe')
})
}
}
} else { // 其他浏览器使用html5-video
$("#vlc-content_1").hide()
$("#video-contnt_1").show()
$("#vlc-content_2").hide()
$("#video-contnt_2").show()
}
// 绑定倍速
$("#beisu").on("change", function () {
var v = $(this).val()
if (useVlc) {
VLC.input.rate = v
} else {
VIDEO.playbackRate = v
}
})
})()
})
// 播放_1
function playVideo_1(url) {
if (useVlc) {
url ? VLC_1.playlist.add(url) : ""
VLC_1.playlist.play()
} else {
url ? VIDEO_1.src = url : ""
VIDEO_1.networkState != 3 ? VIDEO_1.play() : ""
}
}
// 播放_2
function playVideo_2(url) {
if (useVlc) {
url ? VLC_2.playlist.add(url) : ""
VLC_2.playlist.play()
} else {
url ? VIDEO_2.src = url : ""
VIDEO_1.networkState != 3 ? VIDEO_2.play() : ""
}
}
// 暂停播放_1
function zanting_1() {
if (useVlc) {
VLC_1.playlist.pause()
} else {
VIDEO_1.pause()
}
}
// 暂停播放_2
function zanting_2() {
if (useVlc) {
VLC_2.playlist.pause()
} else {
VIDEO_2.pause()
}
}
// 快进10秒播放_1
function kuaijin_1() {
if (useVlc) {
VLC_1.input.time += 10000
} else {
VIDEO_1.currentTime += 10
}
}
// 快进10秒播放_2
function kuaijin_2() {
if (useVlc) {
VLC_2.input.time += 10000
} else {
VIDEO_2.currentTime += 10
}
}
// 快退10秒播放_1
function kuaitui_1() {
if (useVlc) {
VLC_1.input.time -= 10000
} else {
VIDEO_1.currentTime -= 10
}
}
// 快退10秒播放_2
function kuaitui_2() {
if (useVlc) {
VLC_2.input.time -= 10000
} else {
VIDEO_2.currentTime -= 10
}
}
//适用于IE6/7/8/9/10/11浏览器，并且安装有vlc插件，则返回true；
function isInsalledIEVLC() {
var vlcObj = null
var vlcInstalled = false
try {
vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2")
if (vlcObj != null) {
vlcInstalled = true
}
} catch (e) {
vlcInstalled = false
}
return vlcInstalled
}
// 获取浏览器类型
function getBrowserInfo() {
var userAgent = navigator.userAgent//取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") >-1//判断是否Opera浏览器
var isIE = window.ActiveXObject || "ActiveXObject" in window
var isEdge = userAgent.indexOf("Edge") >-1//判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") >-1//判断是否Firefox浏览器
var is360 = userAgent.indexOf("360SE") >-1//判断是否360浏览器
var isSafari = userAgent.indexOf("Safari") >-1 &&userAgent.indexOf("Chrome") == -1//判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") >-1 &&userAgent.indexOf("Safari") >-1 &&!isEdge//判断Chrome浏览器
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+)")
reIE.test(userAgent)
var fIEVersion = parseFloat(RegExp["$1"])
if (userAgent.indexOf('MSIE 6.0') != -1) {
return "IE6"
} else if (fIEVersion == 7) {
return "IE7"
} else if (fIEVersion == 8) {
return "IE8"
} else if (fIEVersion == 9) {
return "IE9"
} else if (fIEVersion == 10) {
return "IE10"
} else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
return "IE11"
} else {
return "0"
} //IE版本过低
} //isIE end
if (isFF) {
return "FF"
}
if (isOpera) {
return "Opera"
}
if (isSafari) {
return "Safari"
}
if (isChrome) {
return "Chrome"
}
if (isEdge) {
return "Edge"
}
if (is360) {
return "360SE"
}
}
// 获取浏览器32位还是64位，安装对应的vlc
function getPlatform() {
var agent = navigator.platform.toLowerCase()
if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
return "win64"
} else if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
return "win32"
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）