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

Recommended Answers

All 5 Replies

What do you have so far? What is not working?

my j player also load but my video doesn't play

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>

please help me I am fresher and I am first time do this work

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.