标签：html javascript css html5 html5-video

我们的HTML移动应用中有一些视频效果很好.但是,我们的视频没有声音,只有字幕,所以我们需要删除音量滑块和静音按钮,但保留计时器栏.

可以用HTML或CSS完成或切换吗？或者是否需要一些JavaScript来执行此操作？

目前我们的html标签中的设置只是：controls =“controls”

解决方法:

超级简单：

你的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()">&gt;</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'; 
}

所以基本上删除“标准控件”并创建自己的.

如果你想获得更复杂的结果,我建议你另外一个选择.这可能是使用更可配置的设置,如video.js.

标签：html,javascript,css,html5,html5-video
来源： https://codeday.me/bug/20191008/1874397.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。