Есть div элемент, в котором расположено видео.
<div id="frame_player" draggable="true" class="draggable">
<div class="menu_video">
<div class="icons"><img src="collapse.png" id="img_collapse" />
<img src="plus.png" id="img_plus" />
<img src="minus.png" id="img_minus" /></div>
</div>
<div id="video_block">
<video id="frame_video" width="480" height="360" controls preload>
<source src="gunses_roses.mp4" type="video/mp4">
</video>
</div>
</div>
Регистрирую события:
document.addEventListener("DOMContentLoaded", function(){
var dragObj = new Drag();
var menuObj = new Menu();
document.getElementById("img_plus").addEventListener("click", menuObj.plus, false);
document.getElementById("img_minus").addEventListener("click", menuObj.minus, false);
document.getElementById("img_collapse").addEventListener("click", menuObj.collapseVideo, false);
document.getElementById("frame_player").addEventListener("dragstart", dragObj.startDrag, false);
document.getElementById("frame_player").addEventListener("dragend", dragObj.dragEnd, false);
document.getElementById("frame_player").addEventListener("drag", dragObj.drag, false);
});
Непосредственно обработка событий:
function Menu() {
//var heightBeforeCollapse;
this.collapseVideo = function () {
//тег с внутренним iframe
var tagElementVideo = document.getElementById("video_block");
//свойство div тега с iframe
var propertyDisplayVideo = getComputedStyle(tagElementVideo).getPropertyValue("display");
//тег IMG icon
var tagIconCollapse = document.getElementById("img_collapse");
//ютюб плеер
var objFrameVideo = document.getElementById("frame_video");
if (propertyDisplayVideo === "block") {
//скрываем предмет, но место под него останется
tagElementVideo.style.display = "none";
//делаем размер div == 0
//скрываем не только контент, но и место под него
//heightBeforeCollapse = tagElementVideo.offsetHeight;
//tagElementVideo.height = 0;
//заменили картинку стрелочки
tagIconCollapse.src = "expand.png";
//событие для ютюб плеера - пауза
objFrameVideo.pause();
} else {
tagElementVideo.style.display = "block";
//tagElementVideo.height = heightBeforeCollapse;
tagIconCollapse.src = "collapse.png";
objFrameVideo.play();
}
};
this.plus = function () {
var tagFrameVideo = document.getElementById("frame_video");
var width = tagFrameVideo.offsetWidth;
var height = tagFrameVideo.offsetHeight;
tagFrameVideo.width = width * 1.1;
tagFrameVideo.height = height * 1.1;
};
this.minus = function () {
var tagFrameVideo = document.getElementById("frame_video");
var width = tagFrameVideo.offsetWidth;
var height = tagFrameVideo.offsetHeight;
tagFrameVideo.width = width * 0.9;
tagFrameVideo.height = height * 0.9;
};
};
//перемещение элемента
function Drag() {
var initX;
var initY;
this.startDrag = function (event) {
console.log("X : " + event.screenX + " Y: " + event.screenY);
initX = event.screenX;
initY = event.screenY;
};
this.dragEnd = function (event) {
this.style.left = this.offsetLeft + (event.screenX - initX) + "px";
this.style.top = this.offsetTop + (event.screenY - initY) + "px";
};
this.drag = function (event) {
var tagFramePlayer = document.getElementById("frame_player");
}
};
Суть в том, что в хроме работает так как и задумано. А вот в файрфоксе не видео, не перенос не работает! В чем такая ошибка? Хотя на други сайтах видео и перенос работает в том же файрфоксе...
Прикрепляю сам сайт, там пара страничек
local.os.ru.zip
