Ooyala Video not playing in any browser - ooyala

I followed steps in this site(http://support.ooyala.com/developers/users/documentation/reference/player_v3_dev_tutorial.html)
Below is my code
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>
Ooyala Web Page
</title>
<script src='http://player.ooyala.com/v3/50396e656f074f74828abeb517a52a46'>
</script>
</head>
<body>
<div id='ooyalaplayer' style='width:640px;height:360px'></div>
<script>OO.ready(function() {
window.player = OO.Player.create('ooyalaplayer', '03ZWZrdjqfMpvpYcC- _VNo7bsnDm78kO', {"autoplay":true}); });</script>
</body>
</html>
What went wrong? The website has a container but video is not loaded its keep on giving the loading symbol

I'm not sure if you're still encountering this issue but I noticed a space in the movie id.
window.player = OO.Player.create(
'ooyalaplayer',
'03ZWZrdjqfMpvpYcC-_VNo7bsnDm78kO',
{"autoplay":true});
});
When I remove the space the content does load, however it appears that the movie has expired. The following error event was raised:
{"0":"error","1":{"code":"unknownSasContent","source":"flash"}}

Related

Scene Viewer will not launch AR from link but it will launch with a QR code pointing to that link

<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE

Rails is putting my application into the body

So, below is a snippet of code that I have in my application.html.erb file.
<doctype></doctype>
<html>
<head>
<title>Test Title</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
The Issue: For some reason rails is taking this code and adding it to the body. (see below) When, if i'm not mistaken, it should create the html based off of this code. I've never run into this problem before with rails, and can't seem to find a solution. It's not turbolinks or anything else i've been working with. What could the issue be?
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<doctype></doctype>
<title>Test Title</title>
<h1>Hello</h1>
</body>
</html>
P.S. This is not my original code, i've broken it down to the bare minimum to show you what the problem i'm running into is.
the doctype looks off. try:
<!DOCTYPE html>
<html>
<head>
head tags
</head>
<body>
body tags
</body>
</html>
with no closing tag for the doctype

jQueryMobile icon issue

I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?

Ooyala player version 2 or 3 not running in IE 10 metro mode

Ooyala player version 2 or 3 not running in IE 10 metro mode
Only in metro mode of IE 10 below code is not running.
Pls help.
below is the code used.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
</head>
<script type="text/javascript" src="http://player.ooyala.com/player.js?width=750&height=312&embedCode=4yb2NyNToSgl-L6mEJvDW4NaqxRYQvnN">
</script>
<head>
<!-- Load Ooyala Player -->
<script src='http://player.ooyala.com/v3/4yb2NyNToSgl-L6mEJvDW4NaqxRYQvnN'></script>
</head>
<body>
<!-- Player Placement -->
<div id='playerwrapper' style='width:750px;height:312px;'></div>
<script>
var videoPlayer = OO.Player.create('playerwrapper', '4yb2NyNToSgl-L6mEJvDW4NaqxRYQvnN');
videoPlayer.play();
</script>
</body>
</html>
You are not seeing playback in IE10 metro for a couple of reasons- you are not embedding player v3 correctly, so the v2 player is the only one thats being loaded. V2 does not support metro in IE10 unless your site is whitelisted for Flash.
I've fixed up your test page for you, please insert an embed code and your player branding id as provided by your Account Manager.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src='http://player.ooyala.com/v3/{PLAYER BRANDING ID}'></script>
</head>
<body>
<!-- Player Placement -->
<div id='playerwrapper' style='width:750px;height:312px;'></div>
<script>
OO.ready(function() {
var videoPlayer = OO.Player.create('playerwrapper', '{EMBED CODE}');
videoPlayer.play();
});
</script>
</body>
</html>

Phone Gap with Jquery Mobile won't open internal links

I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.

Resources