Implementation of JW Player using Modal Popup in Asp.net

Category: ASP.NETJQUERY Comments: No comments

Follow two steps for implementation

Step 1: Add below section to Head Tag

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
<script src=”js/jwplayer.js” type=”text/javascript”></script>
<link href=”ModalPopup.css” rel=”stylesheet” type=”text/css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>
<script type=”text/javascript”>
function DisplayVideo(obj) {
var s = obj;
$(“#dialog-modal”).dialog({
resizable: false,
height: ‘auto’,
width: ‘auto’,
modal: true
});

jwplayer(“mediaplayerid”).setup({ //To open a Player in a Dialog Box
flashplayer: ‘Jwplayer/jwplayer.flash.swf’,
provider: “video”,
file: s,
title: ‘Demo Video’,
image: ‘noimage.jpg’,
autostart: false,
allowfullscreen: ‘true’,
width: ’380′,
height: ’250′,
logo: {
file: “druplicon-polska-small.png”,
link: “http://dotnettricks-abdul.in”
}
});

}
</script>

Step 2: Add below section to Design Page or Aspx Page

<a href=”javascript:void(0)” id=”showvideo” onclick=”DisplayVideo(‘video.mp4′);”>Video 1</a>
<img src=”druplicon-polska-small.png” onclick=”DisplayVideo(‘video.mp4′);” style=”cursor:pointer” />
<div id=”dialog-modal” title=”Video”>
<div id=”mediaplayerid”>
</div>
</div>
Download:

Modal Video

Modal Popup Css: Modal Popup Css
Jw Player Js and Flash Player: JS and Player
Video : Video

Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.