I need to add a flow player to my MVC website. i have added a video to server. when i directly put src path in tag it shows video file not found
<div class="flowplayer">
<video>
<source type="video/mp4" src="my server file location">
</video>
</div>
In site.Master head file i have added
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- 1. skin -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/minimalist.css">
<!-- 2. jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- 3. flowplayer -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
</head>
But when i run this it gets
I would try it with a video from one of the demos on the flowplayer site first.
It may be the video is either encoded incorrectly or the web browser that you tried it on does not support that format.
HTML5 browser support
Related
I have a simple typescript game(using Phaser.io) that i what to run from an ASP.net MVC application in an MVC 5 View page with Layout (Razor)
I have added the view and the controller
/Views/Home/About.cshtml
#{
ViewBag.Title = "About";
}
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>
<div id="game"></div>
The game starts but it does not show any images. It looks like the reference to the image is wrong.
http://asskicker3.azurewebsites.net/Home/About
I reference the images as follows in the app.ts:
preload() {
this.game.load.image('background',"assets/background.jpg");
If i add an HTML page to the root of my folder it all work perfect.
http://asskicker3.azurewebsites.net/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body style="margin:0px; padding: 0px;">
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="app.js"></script>
<div id="game"></div>
</body>
</html>
Answer:
James Skemp solutions works. Just by adding the / it all works. Perfect!
Your asset references are relative.
So if you look at the network tab in a browser you'll notice that it's trying to load the graphics relative to the URL. For example, http://asskicker3.azurewebsites.net/Home/assets/background.jpg
One way to fix this would be to change your preload so that the asset URLs are absolute instead of relative. So
this.game.load.image('background', "assets/background.jpg");
would become
this.game.load.image('background', "/assets/background.jpg");
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
I am using the jquery mobile template from visual studio. In my Layout view I have the following markup
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
When my Browse view is rendered I want to change the data-fullscreen attibute to true. Here is the code I am attempting to use to do this..
<script type="text/javascript">
$("#indexPage").live('pageinit', function () {
alert("Code Engaged");
$("#div").attr("data-fullscreen", "true");
});
</script>
I cannot get this code to engage. Where do I place the code to engage it? The layout has several sections..
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#Page.Title</title>
<meta name="description" content="jQuery Mobile Site">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
#*<meta name="viewport" content="width=device-width, initial-scale=1.0">*#
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<!-- jQuery Mobile Latest Styles -->
<link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" />
#* // reference the minified version of our combined css based on whether we are in debug mode. *#
#if (jQueryMobileTemplate.MvcApplication.IsDebug)
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.css?v=2")" />
}
else
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.min.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" />
}
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<!-- We put these at the top because jquery mobile applies styles before the page finishes loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script> window.jQuery || document.write("<script src='#Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script>
<!-- Pre jQuery Mobile init scripts for overriding defaults -->
<script>
</script>
<!-- Load jQuery Mobile from jquery cdn, get latest builds -->
<script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>
#* <!-- Optionally, load from local site -->
<script src="#Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script>
*#
#RenderSection("HeadContent", false)
#*<script src="#Url.Content("~/js/libs/modernizr-2.0.min.js")"></script>
<script src="#Url.Content("~/js/libs/respond.min.js")"></script>*#
</head>
I tried it at the bottom of my "Browse" view as well but nothing. I just want the "Browse" view to execute this code.
The pageinit event has never properly worked for me either for some reason when I'm using asp.net-mvc. You can try using one of the page change events (pagebeforechange or pagechange) instead.
I am attempting to use jQuery Mobile in Spring Roo.
When I login to my application the application displays the source code for the last included javascript file.
Take a look at mjquery-scripts.tagx file below.
Notice that whatever is the last included file, the source code of that file, will be displayed in the browser.
The address will be something like https://testdomain.com:8080/scripts/jquerymobile/jquery.mobile-1.0.min.js
Now, when I type the url https://testdomain.com:8080/ I will be shown the proper page.
The problem seems to be that on login the redirection is to the path scripts/jquerymobile/jquery.mobile-1.0.min.js .
What could be causing this problem?
Even though I have indicated jquery.mobile this problem happens for jquery.min too.
The default load-scripts.tagx works just fine.
<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<spring:url value="/scripts/jquery-1.7.min.js" var="jQuery_URL" />
<spring:url value="/scripts/jquerymobile/jquery.mobile-1.0.min.css" var="mobile_CSS" />
<spring:url value="/scripts/jquerymobile/jquery.mobile-1.0.min.js" var="mobile_js" />
<link rel="stylesheet" type="text/css" href="${mobile_CSS}"><!-- required for FF3 and Opera --></link>
<script type="text/javascript" src="${jQuery_URL}"><!-- required for FF3 and Opera --></script>
<script type="text/javascript" src="${mobile_js}"><!-- required for FF3 and Opera --></script>
This turned out to be a silly problem on my part.
I placed the jquery js files in the /src/main/webapp/scripts folder.
Moved them over to
/src/main/resources/web-resources
as in the following:
<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<spring:url value="/resources/jquery-1.7-min/jquery-1.7.min.js" var="jQuery_URL" />
<spring:url value="/resources/jquerymobile/jquery.mobile-1.0.min.css" var="mobile_CSS" />
<spring:url value="/resources/jquerymobile/jquery.mobile-1.0.min.js" var="mobile_js" />
<link rel="stylesheet" type="text/css" href="${mobile_CSS}"><!-- required for FF3 and Opera --></link>
<script type="text/javascript" src="${jQuery_URL}"><!-- required for FF3 and Opera --></script>
<script type="text/javascript" src="${mobile_js}"><!-- required for FF3 and Opera --></script>
</jsp:root>
Now it works as expected.
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?