Пользовательские элементы управления HTML5 - отображать только кнопку отключения звука

Question

Пользовательские элементы управления HTML5 - отображать только кнопку отключения звука

0

Могу ли я каким-либо образом отредактировать элементы управления HTML5, чтобы отображать только кнопку отключения звука/включения звука и в правом верхнем углу моего видео? Я нашел способ сделать это, но я выбираю "display: none"; в CSS для всех других идентификаторов и кнопок (что не является лучшим способом для этого). Кроме того, он работает, но единственным браузером, в котором он работает, является Chrome. http://jsfiddle.net/pp6Wn/2/

<div id="video-container">
<video id="my_video" width="100%" height="100%" >
    <source src="http://romain-menard.fr/cours_html5/sitedemo/src/small.mp4"
    type="video/mp4" />
    <source src="video/movie.webm"
    type="video/webm" />
     </video>
<!-- Video Controls -->
<div id="video_controls_bar">
    <button id="playpausebtn"></button>

    <span id="curtimetext">00:00</span>
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><span id="durtimetext">00:00</span>
    <button id="mutebtn">Mute</button>
    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn"></button>
  </div>
</div>

user1094458 23 май 2014, в 23:45

Источник

Теги:

jquery

css

html5

html5-video

2 ответа

Ещё вопросы

neoDev · Answer 1 · 2014-05-23T23-10-00.000Z

Одним из решений может быть создание другой кнопки,
добавьте CSS к нему и назначьте функцию отключения звука JS:

HTML:
Создайте новую кнопку и поместите ее в div "video-continer", но из div "video_controls_bar":

    </video>
<button id="mutebtn2">Mute</button>
<!-- Video Controls -->
<div id="video_controls_bar">

JS:
Назначить функцию отключения звука:
в JS файле добавьте две строки к функции initializePlayer():

mutebtn2 = document.getElementById("mutebtn2");
mutebtn2.addEventListener("click",vidmute2,false);

а затем добавьте эту новую функцию:

function vidmute2(){
    if(vid.muted){
        vid.muted = false;
        mutebtn2.innerHTML = "Mute";
    } else {
        vid.muted = true;
        mutebtn2.innerHTML = "Unmute";
    }
}

CSS:
Добавьте стиль css, чтобы поместить новую кнопку в верхний правый угол видео:

#mutebtn2 {
    position: absolute;
    top: 0px;
    right: 0px;
}

И если вы хотите скрыть элементы управления видео, в файле css просто измените это:

#video-container:hover #video_controls_bar {
    opacity: 1;
}

к этому:

/* this is just a CSS comment, you can bypass it */
/* #video-container:hover #video_controls_bar {
    opacity: 1;
} */

user3796796 · Answer 2 · 2014-07-02T06-58-00.000Z

Проиграть видео:

if($("#video")[0].paused==true)
{
$("#video")[0].play();
}

Пауза видео:

$("#video")[0].pause();

вы можете получить некоторые подробности отсюда http://skillrow.com/html5-video-custom-controls-jquery/