HTML5上的互動視頻

Question

我正在嘗試在視頻中以響應方式插入一些交互式按鈕。 但是我沒有成功。

屏幕1

屏幕2

此示例屏幕顯示完成后的視頻。

想法是將按鈕放在此菜單的圖標上，但是我已經嘗試了幾種方法，但沒有成功。 我無法在視頻的確切位置上放置按鈕位置。

不幸的是，不可能在video標簽內添加其他元素。

這是我的代碼，有什么建議嗎？

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;
}

Answer 1

如果菜單上的圖像是圖像，則可以使用html5的<map>標記作為w3schools的示例，在每個區域上放置onclick屬性並進行編碼。.檢查此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>

更新：為了將其用於您的答案，我將建議以下步驟：

這個想法是使用每個元素與圖像的比例。

1）我建議使用Microsoft畫圖打開菜單圖像。

--->選擇“視圖”選項卡，然后啟用“規則”和“狀態欄”。

--->存儲所需的頂點。 您只需將光標移動到所需位置即可獲得像素坐標，像素坐標將顯示在軟件的左下方

--->選擇“主頁”選項卡，然后單擊“調整大小”按鈕。

--->選中“像素”單選按鈕以查看原始圖像的寬度和高度。

2）最后，為了表示圖像中的任意點，請簡單地遵循以下步驟：（假設點的坐標為83,100 [width，height]，圖像大小為800x500 [width x height]）

//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;
}

您可以對每個頂點進行此操作。 您還可以使用此功能並將其添加到使用事件偵聽器調整窗口大小時。

HTML5上的互動視頻

問題描述

1 個解決方案

解決方案1
0 2016-02-10 15:25:45

HTML5上的互動視頻

問題描述

1 個解決方案

解決方案1 0 2016-02-10 15:25:45

解決方案1
0 2016-02-10 15:25:45