<!doctype html>
<html>
<head>
<title>multiple pseudo scenes</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js">
</script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video-src" autoplay="false" src="https://www.youtube.com/watch?
v=Uz12cLvkVYY"></video>
</a-assets>
<a-video id="video-screen" src="#video-src" position="1.591 2.206 -11"
width="30" height="13">
</a-video>
</a-scene>
</body>
</html>
This is my code. I want to load youtube video in a scene using a-frame. But it does not show anything. How to load a youtube video using a-frame?
It'd be very convenient if you could just drop a youtube URL into a <video> tag, but that's unfortunately not how it works. To embed a youtube video in your page you need to follow one of the methods in the youtube API, which ends up one way or another inserting an iframe in your page containing the video.
And iframes can't be used inside a-frame:
There is no way for the browser to display <iframe>s within WebGL. While it is possible to overlay an <iframe> on top of the canvas, the <iframe> will not display in VR nor can it integrate with the scene.
Further on in the a-frame docs, youtube is specifically mentioned:
Can I render YouTube videos as a texture? No. You could proxy YouTube videos as a texture or download them locally to serve, but that is against their terms of service.
...which suggests that video is possible, but youtube is not (for legal, rather than technical, reasons). If you need to do this you'll need a non-youtube video source.
Related
I'm new to HTML and need to insert a video from youtube onto my page using an element. I've tried different ways but just cannot get it to work. This is the link: https://www.youtube.com/watch?v=ZSM3w1v-A_Y
<!DOCTYPE HTML>
<HTML>
<head> <title> video </title> </head>
<body>
<object> </object>
</body> </html>
You should not use <object> to display a video. Using <object> for videos is an outdated approach. Use <video> instead
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
if you really want to use <object>
<object data="video.mp4"></object>
Of course, all of this assumes you have the video downloaded. If you want to display the youtube video directly from the youtube link like your example, you will have to just embed the youtube player in your webpage with an iframe. You cannot access the raw video directly from youtube.
<iframe src="https://www.youtube.com/watch?v=ZSM3w1v-A_Y">
EDIT: For clarification, you can link to a video from another source, but YouTube does not expose the raw video itself so this is not applicable to YouTube. Also, you can technically put the YouTube link directly in an <object> as you described, but this will cause a CORS violation and therefore will not load. This also still essentially just embeds the youtube player
I am using the <video> tag, and I want to use any URL from YouTube in it.
I have this http://jsfiddle.net/wCrNw/ but it's not working.
I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
></video>
MediaElement YouTube API example
Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<script>
var player = new MediaElementPlayer('#player1');
</script>
Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.
If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.
The most straight forward answer to this question is: You can't.
Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.
There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.
This would be easy to do :
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Is just an example.
This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?
According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Try this solution for the perfectly working
new YouTubeToHtml5();
I have Multiple HTML5 flow player instances on my page. When I start to play one, then click on another one, the first one doesn't stop. Is there any way to configure it so that only one will play at a time?
Here is the code for a test page:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<!-- 2. flowplayer -->
<script type="text/javascript"
src="//releases.flowplayer.org/5.4.1/flowplayer.min.js">
</script>
<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
href="//releases.flowplayer.org/5.4.1/skin/minimalist.css">
<title>title</title>
</head>
<body>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 1">
</video>
</div>
</div>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 2">
</video>
</div>
</div>
</body>
</html>
Ok. Finally found it! It's a feature called "Splash"
From the documentation:
Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits:
You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode.
There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics.
Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically.
By design the splash setup also disables preloading of the video.
https://flowplayer.org/docs/setup.html#splash
As far as I'm aware there is no default behavior in flowplayer to only allow one video to play when there are multiple instances on a page (whether using the flash player or the newer HTML5).
You can do this yourself using the flowplayer api. The api offers methods such as play(), pause() and stop(). In your case you could bind to the click event to be able to stop all other instances.
Example
$('#bacon-player').bind("click", function(e, api)){
// Add code here to stop other players.
$('#other-player').stop();
};
I want to play a mp3 audio file in HTML. I don't want to display the whole player with controls like Volume etc.
I just need a play/pause button, Designed by me, not the core design of some player, like yahoo player, or google one.
For example the audio will be autoplay. When a button (probably an image) is clicked it will pause, and when that image is clicked again, the audio will play again.
There are quite few examples here : http://www.w3schools.com/html/html_sounds.asp
Can I control any of them to play/stop from JS code ?
You can use the html5 audio tag. You can specify your own controls for playback.
<audio preload="auto" autobuffer>
<source src="elvis.mp3" />
<source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>
This is a jQuery solution.
http://jsfiddle.net/QPW27/109/
This is what your non-jQuery solution would look like.
var foo = document.getElementById('player');
foo.pause(); //just bind play/pause to some onclick events on your page
foo.play();
Different browsers support different audio formats. You can specify fallback audio versions though. This website has a nice chart of browser support as of July 2011.
Hopefully, in a few years, the HTML5 audio API will be supported accross more browsers, but currently, playing sounds requires either a lot of browser-specific hacks to get things working, or reliance on a browser plugin like flash.
In the meantime, I reccomend using SoundManager2. It's fairly easy to work with and will involve much less headache than doing it yourself.
Audio.js looks like it has the player styling features you're looking for, with a graceful degradation to Flash if the browser doesn't support the new audio API.
You can play audio by using embed tag
<!DOCTYPE html>
<html>
<body>
<p>Play mp3</p>
<p>Play wav</p>
<script src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
I want to display different context-sensitive content during a video playing on a website. I am using HTML5 video and need a JavaScript API to handle eventing. I will need to control the video player as well as react to different time intervals in the video.
Popcorn.js is an open source JavaScript library for programming rich interactive experiences with HTML5 Video and Audio elements and provides a very simply API to "display different context-sensitive content during a video playing on a website".
Take a look at the demo gallery here: http://popcornjs.org/demos
Here is a tutorial, build with Popcorn.js, that shows how to create a simple Popcorn.js program: http://popcornjs.org/popcorn-101
The docs can be found here: http://popcornjs.org/api (this is still in progress)
The following example uses the Popcorn Footnote plugin to display a simple message under the video at specific time in during the playback:
<!DOCTYPE html>
<html>
<head>
<title>Popcorn Simple Example</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
$(document).bind( "ready", function(){
// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");
// add a footnote at 2 seconds
pop.footnote({
start: 2,
end: 6,
text: "This footnote is the stepping stone of progress!",
target: "footnote-container"
});
// play the video right away
pop.play();
});
</script>
</head>
<body>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnote-container"></div>
</body>
</html>
Working example here: http://jsfiddle.net/rwaldron/6PEU8/
A recent demo shows how you could use an audio element as a slideshow controller, here: http://jsfiddle.net/rwaldron/DjmLM/