Jump to content

rhishi20

Members
  • Posts

    87
  • Joined

  • Last visited

Everything posted by rhishi20

  1. 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?
  2. 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.
  3. I have used html5 video control which is streaming video over our website. after right clicking video control 'save video as' option is available. but i just want to give authority of streaming to the viewer. so, please suggest me how to disable 'save video as' option from that list.
  4. 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>
  5. 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.
  6. 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.
  7. 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>
  8. please suggest alternative browser based video player to jwplayer.if open source then it's great.
  9. suppose, there are 2 servers. each server is having same video but one server only provides downloading and other provides only streaming.50 users downloading from 1st server and 50 users streaming from second server at same time. then, which server is have more load ?
  10. I want to create page which should stream a video file and should not be downloaded at client side something similar to youtube video file
  11. To: Justsomeguy really thanks. nice list. do you know any latest famous game with it's programming language ?
  12. can you specify few names of game-oriented languages ? thanks for answer.
  13. I have searched on internet for best possible programming language to develop better games and i found most of the people saying c++ is best game development language. now i am curious about list of games developed by which programming language.
  14. To: dsonesuk that means as a developer when i crosses 960px width, while developing website for 480 width screen, it will not fit perfectly on that mobile device. right?
  15. thanks to everyone for helping me. finally got solution. Happy moments.
  16. To: Davej You are brilliant. you have done it. thanks i think i have forgot to test your second post , i have tested 7th one. can you please explain it in details? the second post.
  17. what is mean by css pixel ? and how it is different from screen's pixel ?
  18. To : Justsomeguy Thanks for useful info.
  19. To:Hadien I have tried by your way but popup's behavior is not changing this time it goes towards right-bottom corner. anyway thanks for help.
  20. same problem with davej's solution popup goes upper/left corner and finally disappears beyond upper/left screen.
  21. 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.
  22. can anybody please explain with graphical example what is the difference between pagex/pagey , clientx/clienty, offsetx/offsety, screenx/screeny . i have read on Google about these but not understood properly. please give some practical example.
  23. it gives me error on e.stopPropagation(); object doesn't support this propery or method
×
×
  • Create New...