I have saved the source of sample AMP video http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html locally and trying to play video. It works in IE and Edge but not in chrome. if i host this file it works.
Can you please help me understand what is wrong here?
You can try running script in IE an Chrome to see the difference.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
Thanks
When you run the code locally, Chrome opens your index.html with the file:// protocol. Due to Chrome's security policy local resources aren't allowed to be loaded and that's what's preventing playback. (If you check out your JavaScript console, I bet you'll see a similar error.)
To workaround this, you can use an IDE like Visual Studio or WebMatrix that will automatically set up a local web server for you so you can access your page with http://localhost:8000 or whichever port you prefer.
If you don't want to use VS or WebMatrix, you could also use Python's Simple HTTP server. Hope this helps and happy coding :)
Related
I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
In VSCode, is it possible to open a new pane pointing to an http url? I have a server running locally (on port 8080). I want to open it as a WebView. I couldn't find anything that provides this in the WebView API docs.
The functionality I'm looking for is similar to the snippet, except with the url opening in the VSCode editor iteself.
vscode.commands.executeCommand('vscode.open', vscode.Uri.parse('http://locahost:8080'));
You can achieve by using an iframe within webview https://code.visualstudio.com/docs/extensions/webview
// And set its HTML content
panel.webview.html =
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<iframe width="100%" height="100%" src='http://locahost:8080'> </iframe>
</body>
</html>`;
I am trying to do a simple redirect in a Phonegap built (version 3.7) from the opening index.html to another html (main2b.html) on an iphone with no success. It works fine on Android. This is a simplified test of what I need to do.
If I window.location.href='http://www.google.com' as an example it DOES NOT work. (and yes I have white listed it in my config.xml)
If I window.location.href='main2b.html' it just spins and does NOT work either.
For testing purposes the main2b.html is just a simple 'hello' in a div.
I have tried various pathing options of main2b.html with no success so I feel it is not a pathing issue. Both html files are in the same location.
Here is the code sample. Would appreciate any thoughts. This seems like such a simple thing and cannot figure out what is wrong.
Once this simple test works, I need to do something like this where I will detect if my app is 'offline' and as such go to a different html file. This is why I am doing this before any jquery/mobile init stuff which would come later if I detect I am 'online'.
The index.html code:
<!DOCTYPE html>
<html>
<head>
<title>The Conspiracy Show</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no, " />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Phonegap build stuff required ----------- -->
<script src="cordova.js"></script>
<!------------------------>
<script>
function onLoad(){
alert('here at onLoad');
document.addEventListener("deviceReady", deviceReady, false);
}
function deviceReady() {
alert('here at deviceReady')
window.location.href = "main2b.html";
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
main2b.html looks like this
<!DOCTYPE html>
<html>
<head>
<title>The Conspiracy Show App</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>
<meta name="keywords" content="conspiracy Richard Syrett talk show Coasttocoastam paranormal callIn"/>
<!-- Required Stuff for PhoneGap prevent page flickering in iOS----------- -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Phonegap build stuff required ----------- -->
<script src="cordova.js"></script>
</head>
<body style="background:#2D5873;" >
<div align="center" style="margin:0px; padding:0px;">
Hello
</div>
</body>
</html>
I found my own problem. Apparently, in iPhone, if you dont specifically close the splash screen (which can only be done after deviceReady), any redirection will not work. On android, the splash screen close can be done immediately. Anyway, problem solved.
I want to convert my website to mobile application with Intel XDK. So , how to do this with web view.I want to load the URL on the current web view not open it on a new page with the native browser.
Easy way is to use window.location= to load URL:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<script src="cordova.js"></script>
</head>
<body>
<script>
window.location = "http://www.yourwebsite.com";
</script>
</body>
</html>
Better way is to use InAppBrowser and connection Cordova plugins to load website, so that you can handle connection loss and reload, it will load complete website in background and then display, here is code: https://github.com/krisrak/html5-cordova-webapp
Is there a way using the Intel XDK library to determine if my app is running in the IDE's emulator vs. on an actual mobile device? I'd like to put in some logging and debugging code that is conditional on this information.
Thanks.
You can detect if you are testing/emulating your application in the XDK with the Intel XDK Javascript API. There is a property called isxdk which is a boolean value indicating if you are currently running in Intel XDK.
For example,
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script>
if (intel.xdk.isxdk==true){
// Application is running in XDK
alert("Running in Intel XDK Emulator");
}
</script>
</head>
<body>
<h1>Welcome to Intel XDK</h1>
<p>Hello World</p>
</body>
</html>
For more information on the isxdk property, visit https://software.intel.com/en-us/node/493507.
Most methods of detection for this are more trouble than necessary. Have you tried logging to the javascript console? A line such as: console.log("X is" + x); to log a variable, or console.log(e); where e is an event can provide significant information when debugging (having the debug screen open in the emulator, or pulling up the javascript console when running in a browser) but remains invisible when on a mobile device.