Jump to content

rhishi20

Members
 View Profile  See their activity

  • Posts

    87

  • Joined

  • Last visited

 Content Type 

Posts posted by rhishi20

    HTML5 video streaming player not working in IE 9 & above

    in Web Servers

    Posted · Edited by rhishi20

    I have used html5 video control for streaming video on our website it is working with all other latest browsers except IE9 & above.

     

    following is code used for developing html5 video player.

     

    <%Dim detectvar As Integer detectvar = Request.Browser.MajorVersion%> <%If detectvar <= 8 Then %> <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="380" height="300"> <param name="movie" value="images/IMALAB_OpeningCeremony_v1.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="images/IMALAB_OpeningCeremony_v1.swf" width="380" height="300"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> <%Else%> <video id="Video1" controls style="border: 4px solid black;" autoplay="autoplay" height="180" width="320" title="Indore plant" > <source src="videos/IMALAB_OpeningCeremony_v1.ogv" type="video/ogg" /> <source src="videos/IMALAB_OpeningCeremony_v1.webm" type="video/webm" /> <source src="videos/IMALAB_OpeningCeremony_v1.mp4" type="video/mp4" /> </video> <%End If%>

     

     

     

    as internet explorer 8 and below not supporting HTML5, i have put code for flash(.swf) and other than these browser i have put HTM5 video control. but now, HTML5 video player is working fine with all other browsers except IE 9 and above both from locally and through server also. but for IE 9 and above it is only seen locally and not from server. so please tell me how to do this?

    seek function not working in customize html5 video player

    in JavaScript

    Posted · Edited by 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.

    error:javascript function is not a member of aspx file.

    in JavaScript

    Posted · Edited by rhishi20

    I am trying to access JavaScript function player1() from asp button's onclick event, but it throws error 'player1' is not a member of 'ASP.jsvideo2design_aspx'.

     

    following is my aspx code

     

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jsvideo2design.aspx.vb" Inherits="jsvideoplayer2.jsvideo2design" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script type="text/javascript"> <title> video player </title>function player1(e){var vid=document.getElementById("video1");var play1=document.getElementById("play");if (vid.paused) { vid.play(); button.textContent = "||"; } else { vid.pause(); button.textContent = ">"; } } </script></head><body> <form id="form1" runat="server"> <div> <video id="video1"> <source src="videos/IMALAB_OpeningCeremony_v1.webm" type="video/webm" /> </video> <asp:Button ID="button1" runat="server" onclick="player1(event)" /> </div> </form></body></html>

    seek function not working in customize html5 video player

    in JavaScript

    Posted · Edited by 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.

    seek function not working in customize html5 video player

    in JavaScript

    Posted · Edited by 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.

    seek function not working in customize html5 video player

    in JavaScript

    Posted · Edited by 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>

    • Like 1

    how to make div popup draggable.

    in JavaScript

    Posted

    To:Haiden

     

    Yes ! you are right i have run that code in internet explorer 8 and that's why e.stopPropagation() is not supported. so i have run that code in firefox and now e.stopPropagation() is working but when i first time drag popup it works but at second time popup goes to upper left corner automatically and finally disappears beyond upper left screen.

×
×
  • Create New...