I'm trying to get inline SVG elements to be draggable using JQuery UI, so that I can make custom video controls.
Unfortunately I've had little luck. I've tried this SO answer in my code but haven't gotten anywhere. I've also managed to get an SVG image dragging but not inline. Is it just that JQuery UI doesn't play well with inline SVG?
Any suggested alternatives?
$(document).ready(function() {
var v = document.querySelector("#vid");
var b = document.querySelector("#progress");
var x = document.querySelector("#draw_here");
var vidTimer;
var s;
//wait for video and tracks to load
var myVideoPlayer = document.getElementById('vid');
myVideoPlayer.addEventListener('loadedmetadata', function() {
$("#play_ball").draggable()
.bind('mousedown', function(event, ui) {
$(event.target.parentElement).append(event.target);
})
.bind('drag', function(event, ui) {
event.target.setAttribute('x', ui.position.left);
});
//$("#play_ball").draggable({
// axis: "x",
// containment: 'parent'
//});
var videoControls = document.getElementById('videoControls'),
play = document.getElementById('play'),
playProgressInterval = false,
progressContainer = document.getElementById("progress"),
playProgressBar = document.getElementById("play_ball");
// Get rid of the default controls
v.removeAttribute('controls');
handleButtonPresses();
function handleButtonPresses() {
// When the play button is clicked, playor pause the video.
play.addEventListener('click', playPause, false);
// When the play button is pressed, witch to the "Pause" symbol.
v.addEventListener('play', function() {
play.title = 'Pause';
play.innerHTML = '<span id="pauseButton">▐▐</span>';
// Begin tracking video's progress.
trackPlayProgress();
}, false);
// When the pause button is pressed, switch to the "Play" symbol.
v.addEventListener('pause', function() {
play.title = 'Play';
play.innerHTML = '►';
// Video was paused, stop tracking progress.
stopTrackingPlayProgress();
}, false);
// When the video has concluded, pause it.
v.addEventListener('ended', function() {
this.currentTime = 0;
this.pause();
}, false);
v.addEventListener('touchstart', function(e) {
var sDate = new Date();
sTime = sDate.getTime();;
var touchobj = e.changedTouches[0]
console.log(touchobj.target) // returns element touch point landed on
// var xPos =
// var yPos =
// console.log("position is"+e.PageX + ", " + e.PageY);
// console.log("position is" + xPos + ", " + yPos);
}, false);
v.addEventListener('touchend', function() {
var eDate = new Date();
eTime = eDate.getTime();;
if (eTime - sTime >= 99) {
alert("you held it!");
}
}, false);
}
function playPause() {
if (v.paused || v.ended) {
if (v.ended) {
v.currentTime = 0;
}
v.play();
} else {
v.pause();
}
}
function vidUpdate() {
$scope.sliderV.value = parseInt(v.currentTime, 10);
$scope.$broadcast('rzSliderForceRender');
}
// Every 50 milliseconds, update the play progress.
function trackPlayProgress() {
(function progressTrack() {
updatePlayProgress();
vidUpdate();
// pause at chapter breaks
//ignore first cue
for (var i = 1; i < cueS.length; i++) {
if (v.currentTime >= cueS[i].startTime - .10 && v.currentTime <= cueS[i].startTime + .10) {
v.currentTime += .3;
v.pause();
}
}
playProgressInterval = setTimeout(progressTrack, 50);
})();
}
function updatePlayProgress() {
playProgressBar.style.width = ((v.currentTime / v.duration) * (progressContainer.offsetWidth)) + "px";
playProgressBar.setAttribute("cx", (4 + ((v.currentTime / v.duration) * 94) + "%"));
}
// Video was stopped, so stop updating progress.
function stopTrackingPlayProgress() {
clearTimeout(playProgressInterval);
}
}); //ends wait for vid
}); //ends doc ready/* PROGRESS BAR */
#progress {
position: absolute !important;
left: 7%;
height: 70%;
width: 90%;
cursor: pointer;
z-index: 4;
}
#progress_box {
height: 95%;
width: 100%;
border: 1px solid #292929;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #303030;
/* Old browsers */
background: -moz-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#7e7e7e', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
-moz-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
margin: 2px 0 0 5px;
padding: 2px;
overflow: hidden;
z-index: 4;
}
#play_progress {
display: block;
height: 40%;
width: 100%;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(.5, white), to(#e3e3e3));
background: -moz-linear-gradient(top, #e3e3e3, white 50%, #e3e3e3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 4;
}
#play_time {
float: right;
margin: 7px 0 0 5px;
font-size: 10px;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
z-index: 4;
}
#spacer {
display: block;
width: 100%;
height: 30%;
}
#sliderVideo {
position: absolute;
top: 50px;
bottom: 50px;
right: 1%;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="player">
<video id="vid" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<div id="videoControls">
<button id="play" title="Play">►</button>
<div id="progress">
<svg xmlns="http://www.w3.org/2000/svg" id="draw_here" height="100" width="100%">
<line id="play_bar" x1="5%" y1="15" x2="100%" y2="15" style="stroke:#7E7F81;stroke-width:2" />
<circle id="play_ball" cx="4%" cy="15" r="13" fill="#B0C4DE" />
</svg>
<span id="spacer"></span>
</div>
<button id="instructorBtn" title="Instructor">!</button>
</div>
</div>
</body>
