我们的HTML移动应用中有一些视频播放效果很好。但是,我们的视频没有声音,只有字幕,所以我们需要删除音量滑块和静音按钮,但保留计时器栏。
可以用HTML或CSS完成或切换吗?或者是否需要一些javascript来执行此操作?
目前我们的html标签中的设置只是: controls =" controls"
答案 0 :(得分:4)
这有效:
video::-webkit-media-controls-volume-slider {
display:none;
}
video::-webkit-media-controls-mute-button {
display:none;
}
答案 1 :(得分:1)
超级简单:
你的HTML应该是这样的:
<video id="Video1">
<source src="..." type="video/mp4">
<source src="..." type="video/ogg">
Your browser does not support HTML5 video.
</video>
然后添加一个自定义按钮来播放视频:
<button id="play" onclick="vidplay()">></button>
最后一个进度条:
<progress id="progressbar" value="0" max="100"></progress>
然后在javascript中添加一个按钮来播放
var video = document.getElementById("Video1");
function vidplay() {
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
更新进度条的听众:
video.addEventListener('timeupdate', updateProgressBar, false);
function updateProgressBar() {
var progressBar = document.getElementById('progressbar');
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
progressBar.value = percentage; progressBar.innerHTML = percentage + '% played';
}
基本上删除&#34;标准控件&#34;并创建自己的。
如果你想获得更复杂的结果,我建议你另外一个选择。这可能是使用更可配置的设置,例如video.js。
答案 2 :(得分:-1)
完全从视频元素中删除controls属性。
试试这里:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls。删除“控件”属性,该栏将消失。