I am trying to integrate iTunes preview url (m4a file) using jplayer but running into issues
None of the files from Apple iTunes work. For example:
http://a1.phobos.apple.com/us/r1000/057/Music/fd/8b/40/mzm.staswrxu.aac.p.m4a
However these 2 m4a (non apple) links work:
http://jwdriggs.com/jagspodcast/m4a/%23116.m4a
They do work in iTunes player themselves.
What can I do to make them work? Does it have anything to do with iTunes encoding. It would be great if there is any workaround for this issue.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
/*
* Instance CirclePlayer inside jQuery doc ready
*
* CirclePlayer(jPlayerSelector, media, options)
* jPlayerSelector: String - The css selector of the jPlayer div.
* media: Object - The media object used in jPlayer("setMedia",media).
* options: Object - The jPlayer options.
*
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
*
* The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
* Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
* However, the OGA format would be used in this case with the HTML solution.
*/
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
//m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
m4a: "http://a1549.phobos.apple.com/us/r1000/026/Music/d8/01/eb/mzm.mxkkesne.aac.p.m4a"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li>play</li>
<li>pause</li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul>
</div>
</body>
</html>
Try using SoundManager2 - this library works fine for playing iTunes audio previews.
Related
I am following microsoft online Vue tuturial. But following code should be outputting as below html page:
But I am getting this as output not sure why.
Why productName and productDescription are not appearing as string values?
index.js:
const app = Vue.createApp({
data() {
return {
productName: 'Book a Cruise to the Moon',
productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
// additional properties later
};
},
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Relecloud Galaxy Tours</title>
<link rel="stylesheet" href="./assets/styles.css" />
<!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="nav-bar"></div>
<h1>Relecloud Galaxy Tours</h1>
<!-- TODO: Add information display -->
<div id="app">
<h2>{{ productName }}</h2>
<div>{{ productDescription }}</div>
</div>
<!-- TODO: Import Vue app -->
<script src="./index.js"></script>
<script>
app.mount('#app');
</script>
</body>
</html>
I tested your code on my computer and it worked for me.
Make sure the file path is correct and try again.
I just copied and pasted.
Hey guys i'm using asp mvc4 for building a site,im having trouble in Views
First of all i have my _Layout View calling a partialView for header and my partial View is getting data from a model in to fill some data in the header,
It's working by the way just in the Main (index) view but moving to another views just call the Partial view without getting data from database.
Hope i explained Well :D
_layout View
#model MvcApplication1.Models.SchoolInfo
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>#Html.DisplayFor(model => model.SiteName)</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/Template/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/Template/css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<header>
<section id="login">
#Html.Partial("_LoginPartial")
#if (Request.IsAuthenticated)
{
#Html.Partial("_SiteHeaderPartial")
}
</section>
</header>
#RenderBody()
#if (Request.IsAuthenticated){
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Your Website footer</p>
</div>
</div>
</div>
</footer>
}
<!-- jQuery -->
<script src="~/Scripts/Template/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/Template/js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
_SiteHeaderPartial
#model MvcApplication1.Models.SchoolInfo
<div class="brand">#Html.DisplayFor(model => model.SchoolName)</div>
<div class="address-bar">Country | Address : #Html.DisplayFor(model => model.SchoolAddress) | 011 #Html.DisplayFor(model => model.SchoolPhone)
Index and About views are the same (empty).
If your not seeing the details in the About.cshtml view, its because you have not passed a SchoolInfo model to that view (or the model is not populated with the data). However a layout should not include a model declaration (unless its a base model from which all views that use that layout derive).
Remove #model MvcApplication1.Models.SchoolInfo from the layout and instead of #Html.Partial("_SiteHeaderPartial"), use
#Html.Action("SiteHeader", "yourControllerName")
where SiteHeader() is a a controller method that gets your data and returns a partial view, for example
[ChildOnlyAction]
public PartialViewResult SiteHeader()
{
SchoolInfo model = ... // populate your model
return PartialView("_SiteHeaderPartial", model);
}
Sife note: You also need to remove <title>#Html.DisplayFor(model => model.SiteName)</title> or replace it with (say) <title>#ViewBag.Title</title> and in each view, pass the value to the partial using #{ ViewVag.Title = someValue; }
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.
<head>
<!-- Meta / Boilerplate Stuff -->
<meta charset="UTF-8">
<title>Hey</title>
<!-- END Meta / Boilerplate Stuff -->
<!-- LESS + CSS links -->
<link rel="stylesheet/less" type="text/css" href="/resource/css/style.less">
<!-- END LESS + CSS links -->
<!-- Imported JavaScript -->
<script type="text/javascript">
// Dev-environment only LESS debugging object
less = {
env: "development",
dumpLineNumbers: "all"
};
</script>
<script type="text/javascript" href="/resource/js/imports/less.min.js"></script>
<script type="text/javascript" href="/resource/js/imports/jquery.min.js"></script>
<!-- END Imported JavaScript -->
<!-- In-house JavaScript -->
<script type="text/javascript" href="/resource/js/custom.js"></script>
<!-- END In-house JavaScript -->
</head>
Here's my head element, and the URL: http://boilerplate.samstil.es/
My LESS isn't compiling and I can't for the life of me figure out why. I'm not getting any 404's in the console.
LESS doesn't like the space between the -webkit-linear-gradient and the ( in the vertical-gradient and horizontal-gradient mixins. Where you have:
background-image : -webkit-linear-gradient (left, #startColor, #endColor);
you should have
background-image : -webkit-linear-gradient(left, #startColor, #endColor);
Make sure you do this with the other background-image options. I tested this with the online less compiler, available at: http://winless.org/online-less-compiler
Hope this helps!
I've been trying to make a jQuery tab UI like in the following Better alternative to an iframe? but after hours of troubleshooting I just don't know what I'm doing wrong.
My test.html:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
</body>
So in my folder I have test.html (the above), one.html, two.html, and three.html. When I load test.html, any tab I select just says Loading... and the html pages never load.
For a more visual explanation, I'm trying to do what this demo is but with html pages:
http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm
Please help haha I'm so lost as to what I'm doing wrong. Thanks in advance :)