seek function not working in customize html5 video player

[rhishi20]

I am trying to upload video on our website. the main purpose is website's visitor must only stream the video & must not able to download the video. so that by using jquery, i have developed video player with jquery & html5 video tag. pause & play button working fine for me. but seeking(streaming) is not working. can anybody point out my problem.

 

following is my code:

 

 

JS code(vplayer.js)

-----------

 

; (function ($, window, document, undefined) { var pluginName = "tuPlayer",defaults = { //default settings width: "500px", autoplay: false, preload: true, loop: false}; function Plugin(element, options) { this.element = element; this.options = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this._video = ""; this._tuPlayer = ""; this._contorls = ""; this._play = ""; this._progress = ""; this._progressBar = ""; this._progressBtn = ""; this._time = ""; this._vol = ""; this._volBar = ""; this._volBtn = ""; this._flag = ""; this._dur = ""; this.init(); } Plugin.prototype = { init: function () { //setting Global attribute var self = this; _video = $(this.element)[0]; _video.removeAttribute("controls"); _dur = $(this.element)[0].duration; _flag = 0; this.createPlayer(); this.getControls(); this.setCSS(); //to show total time this.showTotalTime(); //HTML5 Video event to update time _video.addEventListener('timeupdate', function () { self.showTime(); }); _play.click(function () { self.clicktoggle() }); //for seek contorl dragging _progress.bind('mousedown', function (e) { self.progSeek(e); }); //for volume contorl dragging _vol.bind('mousedown', function (e) { self.volSeek(e); }); }, //Jquery default toggle function depricated in 1.9.1, //this is custom toggle function for 1.9.1 clicktoggle: function () { if (_flag) { this.pause(); _flag = 0; } else { _flag = 1; this.play(); } }, //creating dom for player createPlayer: function () { $(this.element).wrap('<div class="tu-player" />'); _tuPlayer = $(".tu-player"); _tuPlayer.append('<div class="contrl">'+ '<div class="play">►</div>'+ '<div class="progress"><div class="bar"></div><div class="button"></div></div>'+ '<div class="time">0:00</div>'+ '<div class="vlume">'+ '<div class="bar" style="width: 50px;"></div>'+ '<div class="button"> </div>'+ '</div>'); }, //getting contorl variables for future usage. getControls: function () { _contorls = $(".tu-player .contrl"); _play = _contorls.find(".play"); _progress = $(".tu-player .progress"); _progressBar = _progress.find(".bar"); _progressBtn = $(".tu-player .progress .button"); _time = $(".tu-player .time"); _vol = $(".tu-player .vlume"); _volBar = $(".tu-player .vlume .bar"); _volBtn = $(".tu-player .vlume .button"); }, //setting css rules on custom contorls setCSS: function () { _tuPlayer.css({ "width": this.options.width }); _tuPlayer.find('video').css({ "width": "100%" }); _contorls.css({ 'height': '30px', 'color': '#fff', 'border': '1px solid #404040', 'background': '#2a2a2a', 'opacity': '0.75', 'width': '98%', 'margin': '0 auto 20px', 'border-radius': '5px', 'position': 'relative', 'top': '-42px' }); _play.css({ 'width': '15px', 'cursor': 'pointer', 'float': 'left', 'margin-left': '10px', 'line-height': '30px' }); _progress.css({ 'height': '5px', 'border-bottom': '1px solid #1f1f1f', 'border-top': '1px solid #222', 'width': '60%', 'border-radius': '5px', 'background': '#676767', 'box-shadow': 'inset 0 -5px 10px rgba(0,0,0,0.1)', 'cursor': 'pointer', 'margin': '12px 0 0 10px', 'float': 'left', 'margin-left': '10px', 'line-height': '30px' }); _progressBar.css({ 'background': '#33b5d5', 'height': '5px', 'width': '0', 'float': 'left' }); _progressBtn.css({ 'border-radius': '5px', 'width': '19px', 'height': '11px', 'background': '#fff', 'margin': '-3px 0 0 0', 'float': 'left', 'line-height': '30px' }); _time.css({ 'float': 'left', 'margin-left': '10px', 'line-height': '30px' }); _vol.css({ 'width': '20%', 'height': '5px', 'margin': '12px 0 0 0', 'border-bottom': '1px solid #333', 'border-radius': '3px', 'background': '#111', 'float': 'left', 'margin-left': '10px', 'line-height': '30px' }); _volBar.css({ 'background': '#c61003', 'height': '5px', 'border-radius': '3px 0 0 3px', 'cursor': 'pointer', 'float': 'left' }); _volBtn.css({ 'width': '5px', 'height': '15px', 'background': '#696969', 'border-radius': '3px', 'margin-top': '-5px', 'cursor': 'pointer', 'float': 'left' }); }, //on play play: function () { _video.play(); _play.html("॥"); }, //on pause pause: function () { _video.pause(); _play.html("►"); }, //display video time showTime: function () { var time, min = 0, sec = 00; time = Math.round(_video.currentTime); min = Math.floor(time / 60); if (time) { sec = Math.round(time) - (60 * min); if (sec > 59) { sec = Math.round(time) - (60 * min); if (sec == 60) { min = Math.round(time / 60); sec = 0; } } } _time.html(("0" + min).slice(-2) + ':' + ("0" + sec).slice(-2)); }, //display total video time showTotalTime: function () { var time, min = 0, sec = 00; time = Math.round(_dur); min = Math.floor(time / 60); if (time) { sec = Math.round(time) - (60 * min); if (sec > 59) { sec = Math.round(time) - (60 * min); if (sec == 60) { min = Math.round(time / 60); sec = 0; } } } _time.html(("0" + min).slice(-2) + ':' + ("0" + sec).slice(-2)); }, //progress seek progSeek: function (e) { var x = e.pageX - _progress.offset().left; _progressBar.css({ 'max-width': _progress.width() - 20 }); _progressBar.css({ 'width': x }); _video.currentTime = (x / _progress.width()) * _dur; }, //volume seek volSeek: function (e) { var x = e.pageX - _vol.offset().left; _volBar.css({ 'max-width': _vol.width() - 6 }) _volBar.css({ 'width': x }); _video.volume = x / _vol.width(); } }; // preventing against multiple instantiations $.fn[pluginName] = function (options) { return this.each(function () { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); };})(jQuery, window, document);

 

 

ASP code

-------------

 

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="wijmo1.aspx.vb" Inherits="wijmotrial.wijmo1" %><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript" src="vplayer.js"></script> <script type="text/javascript"> $(function () { $("video").tuPlayer(); }); </script> </head><body> <form id="form1" runat="server"> <div> <video> <source src="videos/IMALAB_OpeningCeremony_v1.webm" type="video/webm" /> </video> </div> </form></body></html>

Edited December 2, 2013 by rhishi20

[justsomeguy]

What happens when you try to seek? Are you checking for Javascript errors? Do you have an example online?

 

Also, just so you know, this:

 

 

the main purpose is website's visitor must only stream the video & must not able to download the video

is not possible with the current web specifications.

[rhishi20]

when i try to seek, only scrollbar moves but video continues to run from beginning.

 

actually, at the start total time of video is 00.00 showing.

 

yes, this is a online example only.

 

yes,i have tried to check for JavaScript errors with firebug.

 

firebug is added in Mozilla Firefox browser. so after running project in Mozilla Firefox, i have debug that page with firebug and now it's streaming properly and also total time for video is showing.

 

but when i try to run same project at another time, same problem happens again.

Edited December 3, 2013 by rhishi20

[justsomeguy]

You're saying it works correctly when you use Firebug but not otherwise? What about with other browsers, each browser has developer tools that you can use to look for Javascript errors.

 

Do you have this code online somewhere where we can look at it?

[rhishi20]

http://www.techumber.com/2013/04/simple-html5-custom-video-player-using-jquery-tuplayer.html

 

this is where you can look same code.

 

yes. with Mozilla Firefox ( Integrated with firebug ) it works at second attempt mostly.

 

I have also tried with chrome ( Integrated with firebug ) but it doesn't work.

 

i am also not understanding control flow in JavaScript file.

 

in this way, i have called for tuplayer() function present in js file.

 

<script type="text/JavaScript"> $(function () { debugger; $("video").tuPlayer(); }); </script>

 

but when i see JavaScript file, i am not able to see any tuplayer() function. since i am using jquery for very first time, not understanding control flow in js file.

Edited December 4, 2013 by rhishi20

[justsomeguy]

On the code they have posted on their site, the tuPlayer method is added to jQuery objects on line 252. If you're using that exact code, then I would ask the author of it for help. The demo doesn't work on their site because the video is a 404, so I can't test it. Based on the number of typos on that site though, I'm not real confident that it wouldn't have any bugs. I can't say for sure though.

[rhishi20]

yes. i am using exactly same code.

[justsomeguy]

If you have a working example of your page with this code with a working video online, I'll take a look at it and see if I see any issues. Otherwise, I recommend contacting the author. He will probably also ask for your page online though.

[rhishi20]

To justsomeguy:

 

My problem is resolved almost. my basic need was to put a video control which will play/pause and stream video on our website. since i am first time using HTML5, i don't know how to use html5 <video> tag. so when i searched for attributes for <video> element. i got 'controls' attribute for <video> element which fulfills my need of streaming video. i have just used that <video> control and kept videos inside it.(without using JavaScript) and it works for me.

 

since i am using visual studio 2010 for asp.net, <video> tag was not detected by visual studio and come with green underline and hence not able to found attributes for video through intellisense.

 

but i really like the way you people help us(newbie's)

 

thanks.

Edited December 6, 2013 by rhishi20