hey friend,I want to play a video click on a button in fancy popup window using jplayer,which suppot all browser.plesase help me
Ankit_12 0 Newbie Poster
pritaeas 2,211 ¯\_(ツ)_/¯ Moderator Featured Poster
What do you have so far? What is not working?
Ankit_12 0 Newbie Poster
my j player also load but my video doesn't play
Ankit_12 0 Newbie Poster
my Code this
<html>
<head>
<meta charset=utf-8 />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<meta name="description" content="fancyapps.com - Fancy App Store" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://localhost/check/ak/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://localhost/check/ak/fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/check/ak/fancyBox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add fancyBox - button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://localhost/check/ak/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=2.1.5" />
<script type="text/javascript" src="http://localhost/check/ak/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=2.1.5"></script>
<!-- Add fancyBox - thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://localhost/check/ak/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=2.1.5" />
<!--<script type="text/javascript" src="http://localhost/demo/fancyBox/source/helpers/jquery.fancyBox-thumbs.js?v=2.1.5"></script>
-->
<!-- Add fancyBox - media helper (this is optional) -->
<script type="text/javascript" src="http://localhost/check/ak/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<!-- Next files are only for this website! -->
<link rel="stylesheet" href="http://localhost/web.css?v=2" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/js/web.js"></script>
<script type="text/javascript" src="https://code.jquery.com//jquery.1.10.2.js"></script>
<!-- Add prettify -->
<script type="text/javascript" src="http://localhost/js/prettify.js"></script>
<script type="text/javascript">
</script>
<script>
$(document).ready(function(){
$(function() {
$(".ck").click(function() {
var myVideo=""; // Dont forget about 'this'
$.fancybox({
padding : 0,
content: '<div id="video"></div>',
afterShow: function(){
$('#video').append('<div id="jp_container_1" class="jp-video jp-video-360p"><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></div><div class="jp-interface"> <div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time"></div><div class="jp-duration"></div><div class="jp-details"><ul><li><span class="jp-title"></span></li></ul></div><div class="jp-controls-holder"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1" title="play">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1" title="pause">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1" title="stop">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>/<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><ul class="jp-toggles"><li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li><li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li><li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li><li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li></ul></div></div></div><div class="jp-no-solution"></div></div></div></div>');
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "song/c.mp4",
ogv: "song/c.mp4",
poster: ""
})
},
swfPath: "/assets/jplayer",
supplied: "m4v, ogv",
cssSelectorAncestor: "",
cssSelector: {
play: ".jp-play",
pause: ".jp-pause",
stop: ".jp-stop",
mute: ".jp-mute",
unmute: "jp-unmute",
maxvolume: "jp-volume-max",
fullscreen: "jp-full-screen",
restorescreen:"jp-restore-screen",
repeat: "jp-repeat",
repeatoff: "jp-repeat-off",
currentTime: "#currentTime",
duration: "#duration"
},
size: {
width: "640px",
height: "500px"
}
});
}
});
return false;
});
});
});
</script>
</head>
<body><input type="button" name="a" value="Click" class="ck"></body>
</html>
Ankit_12 0 Newbie Poster
please help me I am fresher and I am first time do this work
Ankit_12 0 Newbie Poster
anybody else.....
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.