I am working in asp.net c# project, in that i have to play videos from folder path.
iam trying below code, the video path binding in datalist is correct, but when i press play button its always spinning, no videos display
<asp:DataList ID="DLVideos" RepeatColumns="2" runat="server">
<ItemTemplate>
<a class="player" style="height: 300px; width: 300px; display: block" href='<%# Eval("Column1","../Uploads/App_Videos/{0}") %>'></a>
<br class="clear"/>
</ItemTemplate>
</asp:DataList>
<script src="../FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.js" type="text/javascript"></script>
<script src="../FlowPlayer/flowplayer.embed-3.2.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
flowplayer("a.player", "../FlowPlayer/flowplayer-3.2.16.swf",
{
plugins: {
pseudo: { url: "../FlowPlayer/flowplayer.pseudostreaming-3.2.12.swf" }
},
clip: { provider: 'pseudo', autoPlay: false},
});
</script>
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>
my question is :
does flow player not support other video formats?(i have used .3gp format)
For Referance : http://flash.flowplayer.org/demos/plugins/javascript/embed.html
pls help to play video in asp.net c#, any othe code welcome.
Related
I have an .epub file that does not have any effect or animation while user turns between the pages
I use Turn.js library for it be it does not work .I can not open it with eBook readers softwares.
Here is my Epub folder Directory
Before add Turn.js library
After add Turn.js library
And here is my chap_0001.xhtml Html code
<head>
<title>How to Win Every Argument</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
</head>
<body dir="auto">
<h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
<div class="offset">
<div class="flipbook-viewport"><!-- Added-->
<div class="container"><!-- Added-->
<div class="flipbook"><!-- Added-->
<div style="width: 100.0%;">
<img src="images/img_0001.png" alt="Picture #1"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<div style="width: 37.238758708043065%;">
<img src="images/img_0002.png" alt="Picture #2"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
<div style="width: 45.59848005066498%;">
<img src="images/img_0003.png" alt="Picture #3"/>
</div>
<!-- rest of pages -->
</div>
</div>
</div>
</div>
And here is my chap_0001.xhtml Js code
<!-- language: lang-js -->
//Added after using Turn.js library
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width: 922,
// Height
height: 600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['style/basic.css'],
complete: loadApp
});
I only copy library folders and change chap_0001.xhtml file . That's it.
Any help will be appreciated
I am not sure what particular issues you had with your script. One main issue is the extra spans you included in your html:
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
They were considered "pages" and therefor turn.js turned the page to blank span that does not have the same size as other elements.
Anyway, this is a working example with your html: JSFiddle Example
I could not include working code here because turn.js is served over http. I had to copy the entire code and paste into js part which is more than stackoverflow text limit
I want to show 4 popup windows, at the same time, which show 4 different flash slides after a respective image button is clicked.
I used JavaScript to make the popup window but cannot complete the rest of the image button. When i click on the button random flash slide plays.
Please refer below code :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=a]").live("click", function () {
$("#dialog26").dialog({
title: "DMD Officers",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=b]").live("click", function () {
$("#dialog27").dialog({
title: "Outsourced Photographs",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=c]").live("click", function () {
$("#dialog28").dialog({
title: "DMD Dog Squad",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=d]").live("click", function () {
$("#dialog29").dialog({
title: "Snake awareness campaign",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="3" class="auto-style9">
<nav id="ddmenu">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div id="dialog26" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div id="dialog27" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div id="dialog28" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div id="dialog29" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This code here $("[id*=btnPopup]") is means that is capture all buttons that contains the btnPopup !, since the rest buttons contains that because of the name (btnPopup2,btnPopup3,btnPopup4) you have capture all with the same (first) code, and what ever you press only the first is fired.
So rename the first button to btnPopup0 if you like to use this code as it is and make it work.
Reference :
https://api.jquery.com/attribute-contains-selector/
But I see more bugs...
in this line $("#dialog").dialog({ that exist on every call, is still call the same part of the page to make it dialog, but I see that the other parts have names like dialog1, dialog2 etc... so this is something that you must fix also.
lots and lots of mistake in your code !!! .Let me point out one by one.
1. $("[id*=a]").live("click" : Similar code exist in other 3 sections. Do Not Use Live to bind events. Its deprecated, and deprecated for good reasons. Taken from the doc
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Also in your scenario [id*=a] is not required. Simply id=a would be sufficient.
live() jquery API Document
2. $("#dialog").dialog({ : You have the same code in other 3 sections as well. You are binding events to the same id. Which is a BIG NO. Do not use same Id's Id's has to be unique in the entire DOM. You can make use of class. Just put the same class name to all the divs and then bind events using the class name.
- When you bind events by using ids Jquery will find the first element with that id in the DOM (reading from top) and binds the event to onle that element.
You are repeating the same script logic multiple times, make it Generic. So cleaning up your HTML and SCripts, Below is what you actually need.
HTML
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
Note: I added a class to all the imageButton, And then changed the div id to class. Also added data-dialog-title attribute to hold the titles for the dialog. More About data Attribute You will see its usage below.
Script
<script type="text/javascript">
$(function(){
$.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
$(this).dialog({
title: $(this).data('dialog-title'), //extract the title here.
height: 700,
width: 1000,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
$(".imageDialog").on("click", function() {
$(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
});
});
</script>
On document ready apply the dialog plugin to all the div's with class dialog
Bind event to all imageButton by just using class selector .imageDialog
trace up to the parent td, then trace down to find the div with class name 'dialog' and open it.
Im using PrettyPhoto Version 3.1.5 in a prestashop site, and am attempting to add a pinterest button, I would ideally not like to have to change the code in the js file itself.
For some reason media and url is still coming back as undefined...
<script type="text/javascript">
$(document).ready(function() {
{literal}
var photo_options = { social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></' + 'script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div><div class="pinterest"><img border="0" src="http://assets.pinterest.com/images/PinExt.png"; title="Pin It" /></div>' };
{/literal}
$("a[rel^='prettyPhoto']").prettyPhoto(photo_options);
});
</script>
Here is part of the generated html after you click on the image...
<div id="pp_full_res">
<img id="fullResImage" src="/modules/gallery/img/2bf766b19efd5410fa795f452b401186.jpg" style="height: 365px; width: 486px;">
</div>
I tried $('#fullResImage').attr('src') but still nothing
There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.
I have it working most of the way, but can't get the video to play on click of the image.
I am not the best with scripting.
An example of what I have done:
http://jsfiddle.net/3s8EC/2/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}
#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat;
}
</style>
<div style="width: 100%; height: 370px; background-color: #000;">
<div id="promovid">
<div class="custom-th">
<img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />
</div>
<div id="thevideo" style="display:none; padding: 0px;">
<center>
<video onclick="this.play();" preload="auto" width="600" height="370">
<source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
</video>
</center>
</div>
</div>
</div>
Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.
Thanks in advance for the help.
Just add a $("video").click();
Like this:
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
$("video").click();
});
});
});
Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.
I have code (see below) in my webpage. With below code i get two flash mp3 players on the web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="Contents/swfobject.js"></script>
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="width:100%; text-align: center;">
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId1", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Sleep Away.mp3"}, false);
</script>
<div id="myId1"
style="position: relative; width: 250px; height: 20px; ">
</div>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
swfobject.embedSWF("Contents/player_mp3_maxi.swf", "myId2", "250", "20", "9.0.0", false, false, {menu: "false",flashvars: "mp3=Contents/Kalimba.mp3"}, false);
</script>
<div id="myId2"
style="position: relative; width: 250px; height: 20px; ">
</div>
<br />
Stop
</td>
</tr>
</table>
</form>
</body>
</html>
The above code works fine and all i need now that only one flash mp3 player should play the audio at one time. For example if i click on flash plyer 2 then falsh player 1 should stop and vice versa. I can stop flash players with click event with below code but this is not fulfilling what i need.
I have put below function in head tag
<script type="text/javascript">
function stop() {
document.getElementById("myId1").SetVariable("player:jsStop", "");}
</script>
and this in body tag
Stop
Can please any friend tell me that how can i achive what i need with above stop function. Or where should i put this code so when i click on fash player 2 then flash player 1 should stop playing audio.
Make only one of the players start on page load.
Then, make a handler that will be ran on a click on one of the players. If the click was originated from player1, them stop it and start player2 (and viceversa).