Интерактивное видео на HTML5

Я пытаюсь вставить несколько интерактивных кнопок на видео, реагируя на них. Однако я не преуспеваю.Интерактивное видео на HTML5

Screen 1

Screen 2

Этот образец экрана показывает видео после финиша.

Идея состоит в том, чтобы поместить кнопки над значками этого меню, однако я уже пробовал несколько способов и не имел успеха. Im не в состоянии сделать положение кнопок в точном положении видео.

И, к сожалению, невозможно добавить другие элементы в тег видео.

Вот мой код, любые предложения?

HTML:

<body> 

<video id="video" autoplay="true" width="100%" height="100%" class="video" onclick="onVideoClick()"> 
    <source id="video_src" src="videos/Intro.mp4" type="video/mp4"> 
</video> 

<script> 
    // Listener quando o video terminal 
    document.getElementById('video').addEventListener('ended', function(e) { 
    onVideoFinish(); 
    }); 
</script>

CSS:

.video{ 
    margin: auto; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: -5; 
}

источник

2016-02-10 Henrique Kraemer

Вы можете позиционировать элементы DOM в качестве наложения z-индекса поверх элемента '

Просто предложение - вместо того, чтобы пытаться выровнять кнопок над видео, не было бы проще иметь одну прозрачную кнопку над всем видео, а затем определить положение мыши относительно того, какую кнопку она нажала? Таким образом, изображение всегда остается идеальным. –

Меню, которое у вас есть над видео на финише, это изображение? – mrapsogos

Если то, что вы имеете в меню изображение можно использовать <map> tag из html5, как this example из w3schools, поместите атрибуты onclick в каждую область и выполните свое кодирование. Проверьте this jsfiddle: Код

<!DOCTYPE html> 
<html> 
<body> 

<p>Click on the sun or on one of the planets to watch it closer:</p> 

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:" onclick = "alert('you clicked me the SUN')"> 
<area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:" onclick = "alert('you clicked me the MERCUR')"> 
<area shape="circle" coords="124,58,8" alt="Venus" href="javascript:" onclick = "alert('you clicked me the VENUS')"> 
</map> 

</body> 
</html>

UPDATE: Для того, чтобы использовать его для вашего ответа я хотел бы предложить следующие шаги:

Идея заключается в том, чтобы использовать соотношение каждого элемента по отношению с образ.

1) Я бы предложил открыть изображение меню с помощью краски microsoft.

---> выберите вкладку «Вид» и включите «Линейки» и «Строка состояния».

---> Сохраните нужные вам вершины. Вы можете получить их просто, перемещая курсор в нужную точку, и пиксельные координаты будут отображаться в левом нижнем углу программного обеспечения.

---> выберите вкладку «домой» и нажмите кнопку «Изменить размер».

---> установите переключатель «Пиксели», чтобы просмотреть ширину и высоту исходного изображения.

2) Наконец, чтобы выразить в произвольную точку внутри изображения простого следующим образом: (позволяет предположить, что координаты точек являются 83100 [ширина, высота], а размер изображения 800x500 [ширина х высоты])

//define the point coordinates 
var vertex_X = 83; 
var vertex_Y = 100; 

//define the original image size 
var imageWidth = 800; 
var imageHeight = 500; 

//calculate the ratio of the point relative to the image 
var vertexRatio_X = vertexCoords_X/imageWidth ; 
var vertexRatio_Y = vertexCoords_Y/imageHeight;

после того, как соотношение вы можете использовать его как это:

function defineActiveAreas(){ 
    var videoWidth = document.getElementById("video").clientWidth; 
    var videoHeight = document.getElementById("video").clientHeight; 

    var pointNew_X = vertexRatio_X * videoWidth; 
    var pointNew_Y = vertexRatio_Y * videoHeight; 
}

вы можете сделать это для каждой точки вершины.Также вы можете использовать эту функцию и добавить ее к тому, когда окно изменится с помощью прослушивателя событий.

источник

2016-02-10 15:25:45 mrapsogos

Как использовать это в ответном виде? –

Что вы подразумеваете под ответ? Вы хотите знать, как выбрать области, которые вы хотите от изображения, и добавить к ним взаимодействие? – mrapsogos

Эти координаты на примере, они являются фиксированными значениями как планета. Мое видео имеет ширину/высоту 100%. Как я могу сделать эти координаты масштабируемыми? –

Интерактивное видео на HTML5

ответ

Смежные вопросы