2014-10-20 5 views
1

Извините, если это было задано раньше (я определенно пробовал поиск). У меня есть HTML-видео, встроенное на страницу, и элементы управления проигрывателя отображаются вне окна видео. Я хотел бы получить их внутри видео-окна, но я не могу найти какую-либо настройку для атрибута элементов управления.Как получить html-элементы управления видео в окне видео

Я знаю HTML <video> тег не очень настраиваемый, но я видел много HTML видео отображается в желаемом направлении (с элементами управления внутри видео окна, а не снаружи), поэтому я предполагаю, что это возможно.

Пример того, что я пытаюсь сделать: http://easyhtml5video.com/

Как это выглядит в настоящее время: img

+1

Какой браузер вы используете? Он появляется внутри по умолчанию для меня: http://jsfiddle.net/prankol57/pw8jgp4h/ – soktinpk

+0

Можете ли вы разместить HTML-код? Если нет, [this] (http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos), похоже, содержит множество способов настроить воспроизведение видео в формате HTML5. – hrbrmstr

+0

Я использую хром по умолчанию. но уточнить, как это выглядит на http://easyhtml5video.com/, это то, что я ищу (и это отображает внутри меня). Прилагаемое изображение - это мой текущий проект, который не отображается внутри, к сожалению, –

ответ

0

Оказалось, что атрибут height является проблемой.

Без атрибута высота:

<video controls="" id="videoelement" width="480" style="margin:auto; padding-left:107px" webkit-playsinline=""> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" /> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" /> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" /> 
 
</video>

с атрибутом высоты:

<video controls="" id="videoelement" width="480" height="360" style="margin:auto; padding-left:107px" webkit-playsinline=""> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" /> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" /> 
 
    <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" /> 
 
</video>

height атрибут должен быть фактическим height видео.

+0

, удаляя атрибут высоты, полностью дали мне результаты, которые я хотел. благодаря! –

+0

@ rom-dos Если этот ответ помог вам, подумайте о его принятии (проверяя эту галочку там под кнопками upvote/downvote). Это не обязательство делать это (вам не нужно, если вы этого не хотите). – soktinpk

+0

извините, я здесь новый! просто принято. –

0

height вашего video тега должен соответствовать высоте фактического разрешения видео ....

вот FIDDLE

В этом разрешение видео 604px X 256px Если видеотег имеет 604x256, тогда элементы управления остаются в пределах, если я изменил height на 356, как показано на скрипке, затем элементы управления выходят за пределы видео.

Возможно, вы захотите проверить разрешение видео и сравнить его с высотой видеотега.

Не уверен, что имеет значение ширина.