I try to display a 360-video in a a-sphere using the a-frame framework.
My code is as follows:
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
<title></title>
</head>
<body>
<a-scene>
<a-assets
<video id="antarctica" playsinline autoplay loop="true" src="130.mp4">
</a-assets>
<a-videosphere src="#antarctica"></a-videosphere>
<!-- Using the asset management system. -->
<a-camera position = "0 0 0">
<a-cursor color=#FFFFFF></a-cursor>
</a-camera>
</a-scene>
<script>
</script>
</body>
</html>
The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)
EDIT: I bookmarked the page to my home screen
Unfortunately, video does not autoplay on mobile browsers yet.
For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.
Here's an example...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video example</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="./bower_components/aframe/dist/aframe.js"></script>
<script>
window.addEventListener("load", function() {
document.querySelector("#video").addEventListener("play", function() {
var video = document.querySelector("video");
var assets = document.querySelector("a-assets");
var videosphere = document.querySelector("a-videosphere");
var scene = document.querySelector("a-scene");
assets.appendChild(video);
videosphere.setAttribute("src", "#video");
scene.removeAttribute("style");
video.play();
})
});
</script>
</head>
<body>
<video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
<a-scene>
<a-assets></a-assets>
<a-videosphere></a-videosphere>
</a-scene>
</body>
</html>
Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?
Related
I have made a page in UI5 in which there is a button to open the dialog popup. On this popup page, I have some text boxes and chart, but the chart is taking so much time in loading so the entire page is displayed as white screen until the chart is loaded.
I want to show some loader for this white screen. What can be the possible solution?
(I was trying for loading a text box first and then chart but the problem is entire page is loaded together)
try below code for loader.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>Example Application</title>
<script id="util-coreloader"
src="util/CoreLoader.js"
data-loader-src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"com.inwerken": "../com_inwerken"
}'
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
// execute when Core is loaded ...
CoreLoader.onReadyState(function() {
sap.ui.getCore().attachInitEvent(function () {
// .. load Component
var oComponentContainer = new sap.ui.core.ComponentContainer({
height: "100%",
name: "Example"
});
oComponentContainer.placeAt("content");
CoreLoader.ready();
});
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/
My ultimate goal is to have on iDevices viewing my website, an image link that on click, plays a video at full screen, and upon finish of video redirects to another webpage. I am open to any solution that achieves my goal, even if it means scrapping the code I've got.
Here is my best attempt as of yet:
This is My current testing site
I was following this stackoverflow post
I am happy with the results on my laptop [edit works on Chrome but not FF 16.0.1 sigh I don't know anymore), but I am currently unable to click the image to play the video on my iDevices (ipad1 & iphone4). I've spent hours attempt to achieve this by researching, trial & error to no prevail.
Here is the code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="description" content="" />
<title>test</title>
<script type="text/javascript">
function videoEnd() {
var video = document.getElementById("video");
video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
video.addEventListener('ended', videoEnd, true);
video.webkitEnterFullScreen();
video.load();
video.play();
}
</script>
</head>
<body>
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
</video>
</body>
</html>
If a browser doesn't support the fullscreen API (http://caniuse.com/#feat=fullscreen) then that may throw an error in your playVideo function. Try this modification:
function videoEnd() {
var video = document.getElementById("video");
if(video.webkitExitFullScreen) video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
if(video.webkitEnterFullScreen) video.webkitEnterFullScreen();
video.load();
video.play();
}
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();" onended="videoEnd();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
I have a number of very small pages which basically loads a video for use on mobile browsers. In the latest iOS (5.1.1) the video player loads, but then just spins. The video can be played by clicking on the video, but since it looks like it's still loading, people may not do that. Works everywhere else.
I'm using the youtube api code
This is a test version of the page.
http://bit.ly/S2KuN1
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Celebrity's Caribbean Shore Excursions</title>
<link href="http://www.celebritycruises.com/css/min/global.min.css" rel="stylesheet">
<link href="http://media.celebritycruises.com/celebrity/content/en_US/css/m_video.css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'PH-m591p4xg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
<script type="text/javascript" src="m_video.js"></script>
</head>
<body id="video_page">
<div class="logo"><img src="http://media.celebritycruises.com/celebrity/content/en_US/images/cel_misc/logo.jpg" alt="Celebrity Mobile" width="259" height="55" border="0"></div>
<div id="player"></div>
<div class="visit">
<p>Now visit Celebrity Cruises' official mobile website.</p>
<p><a class="ccButton large" target="_self" href="http://m.celebritycruises.com/m/home.do"> <span class="text">Explore</span> <span class="pointer"> </span> </a></p>
</div>
</body>
</html>
And here's the js for the page
// JavaScript Document
// autoplay video
function onPlayerReady(event) {
event.target.pauseVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "http://m.celebritycruises.com/m/home.do";
}
}
//style Blackberry
window.onload = function() {
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") != -1 ) {
document.getElementById("video_page").className = "bb";
}
};
Okay, I figured out how to solve it.
I changed
event.target.pauseVideo();
to
event.target.stopVideo();
I don't know what the issue is, but iOS 5.1.1 never seems to finish autoloading. Using the stopVideo() command from the YouTube api stops the process and the play button appears. Once clicked, it loads normally.
file://localhost/C:/Users/kürşat/Desktop/yeni%20site/faq%20-%20Kopya/kopya.html
this is my photography tutorial page. I'm did manage to toggle on/off when someone clicks a question.
What I can't do : the top right button can expand all but it cannot contract all questions.
I should contract/expand all even if some of them were previously opened. At first my code was doing the opposite of previous state.
How can I do that?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$(this).next().toggle("fast");
$(li).css("background-color","#999");
$(article).css("background-color","#FDFEE9");
});
$(document).ready(function(){
$("#expand").click(function(){
$("article").toggle(true);
$(this).text($(this).text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
$("article").toggle();
});
});
</script>
</head>
<body>
<div id="page"><h1>Temel Fotoğrafçılık Bilgileri<button id="expand">Genişlet</button></h1>
<div class="faq">
<!-- The FAQs are inserted here -->
<ul>
<li>question 1?</li>
<article> <p>answer 1.</p></article>
<li>question 2?</li>
<article> <p>answer 2.</p></article>
<li>question 3?</li>
<article> <p>answer 3.</p></article>
</ul>
</div>
</body>
</html>
Here is the working JSfiddle version:
http://jsfiddle.net/reJu9/
Change the expand click callback to
$("#expand").click(function(){
var $this = $(this);
if($this.text() == 'Genişlet')
$('article').show();
else
$('article').hide();
$this.text($this.text() == 'Genişlet' ? 'Küçült' : 'Genişlet');
});
Demo: http://jsfiddle.net/joycse06/reJu9/1/
Maintain a variable, which tells you if the button should expand or collapse questions.
Check this updated fiddle