Я пытаюсь использовать psiturk для отображения видео с интерактивными областями для исследования. Firefox не будет работать с картой изображений. Почему Firefox работает с этим, а Chrome? Вот мой код:
<script>
var videoNames = ["../static/images/Video1.mp4", "../static/images/Video2.mp4", "../static/images/Video3.mp4", "../static/images/Video4.mp4", "../static/images/Video5.mp4", "../static/images/Video6.mp4", "../static/images/Video7.mp4",
"../static/images/Video8.mp4", "../static/images/Video9.mp4", "../static/images/Video10.mp4", "../static/images/Video11.mp4", "../static/images/Video12.mp4"
];
var startTime = new Date();
let videos = [10, 4, 6, 11, 0, 1, 5, 3, 8, 2, 9, 7];
currentVideo = videos.shift();
document.getElementById("thevideo").innerHTML = '<video preload autoplay id="myVideo"><source src=' + videoNames[currentVideo] + ' type="video/mp4">Your browser does not support HTML5 video.</video>';
window.scrollTo(0, 0);
reprompt = setTimeout(prompt_resubmit, 10000);
for (let i = 1; i <= 18; i++) {
$("#area" + i).click(function() {
currentview = new PostVideo();
});
}
</script>
<div id="container-questionnaire">
<div id="thevideo" />
<div class="videocontent">
<img id="map1" usemap="#videomap">
<map name="videomap" position="absolute">
<area id="area1" class="mybtn" shape="rect" value="leftBlueTriangle" coords="53,490,83,520">
<area id="area2" class="mybtn" shape="rect" value="blueCube" coords="128,491,158,521">
<area id="area3" class="mybtn" shape="rect" value="greenTriangle" coords="207,489,237,519">
<area id="area4" class="mybtn" shape="rect" value="rightBlueTriangle" coords="293,481,323,511">
<area id="area5" class="mybtn" shape="rect" value="rightYellowCylinder" coords="377,476,407,506">
</map>
</div>
</div>
Я много чего перепробовал, но озадачен, почему он работает на chrome, а не на firefox.
Новое редактирование Я исправил некоторые проблемы и сделал код следующим образом:
<style>
#myVideo {
position: absolute;
left: 0;
top: 0;
height: 700px;
}
#map {
position: absolute;
left: 0;
top: 0;
height: 700px;
width: 466.7px;
z-index: 10;
}
</style>
<html>
<div id="container-questionnaire">
<div id="thevideo"></div>
<div class="videocontent">
<img id="map" usemap="#videomap" />
<map name="videomap">
<area id="area1" shape="rect" alt="leftBlueTriangle" coords="53,490,83,520">
<area id="area2" shape="rect" alt="blueCube" coords="128,491,158,521">
<area id="area3" shape="rect" alt="greenTriangle" coords="207,489,237,519">
</map>
</div>
</div>
<script>
var videoNames = ["../static/images/Video1.mp4", "../static/images/Video2.mp4", "../static/images/Video3.mp4", "../static/images/Video4.mp4", "../static/images/Video5.mp4", "../static/images/Video6.mp4", "../static/images/Video7.mp4",
"../static/images/Video8.mp4", "../static/images/Video9.mp4", "../static/images/Video10.mp4", "../static/images/Video11.mp4", "../static/images/Video12.mp4"
];
let videos = [10, 4, 6, 11, 0, 1, 5, 3, 8, 2, 9, 7];
currentVideo = videos.shift();
document.getElementById("thevideo").innerHTML = '<video preload autoplay id="myVideo"><source src=' + videoNames[currentVideo] + ' type="video/mp4">Your browser does not support HTML5 video.</video>';
window.scrollTo(0, 0);
// reprompt = setTimeout(prompt_resubmit, 10000);
for (let i = 1; i <= 3; i++) {
document.getElementById("area" + i).addEventListener("click", function() {
console.log("clicked area" + i);
});
}
</script>
</html>
Я заметил, что firefox даже не регистрирует области. Когда вы проверяете источник, в html области выделяются серым цветом. Я не уверен, что это значит. Я думаю, это означает, что они не создаются.