I'm working on a project and in that project, I need to change the seek bar of html5 player to vertical along the video height. I tried a lot but couldn't find any solution. Then I used videojs
as my HTML5 player, and now what I'm doing is rotating div of it's seek bar to 90 degrees
and then adjusting left and top properties to adjust its position with video. I know this is not very good approach to do this but I couldn't find any solution so I used this approach for now. But a second problem is happening and it's that I cannot seek video by clicking on the seekbar
, it just starts the video from zero if I click the seekbar
, If I don't rotate and dont' set positions with left, top properties, then seek is working fine. After trying many hours on internet, I'm lost, so I came here looking for solutions, is there any possible way to have my seekbar vertical with video height and also enable seeking? Any help would be appreciated
In the getPointerPosition
you need to change position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxW))
. You also need to find var sizeKey
and change it to var sizeKey = _this2.vertical() ? 'width' : 'width'
;
seekbar
is registering mouse clicks, it should be somewhere in the Video.js library. – onetwo12 Jul 14 '17 at 21:14seekbar
is changed, that's why it's not firing trigger properly. I tried but no solution yet, so I left that project :-( – Zohaib Aslam Jul 17 '17 at 10:49