I'm trying to write a simple audio player for a website, and am using the EMBED... tag to embed the audio and setting HIDDEN="true" and using various javascript commands to control the audio playback. It works fine for realplayer and mplayer but the quicktime plugin doesn't respond to javascript if the hidden bit is set - is there any workaround for this?
First, i suggest you to use the object html tag which is standardized, embed is not.
Then you could simply hide your embeded audio using CSS instead of this hidden param.
Even better, you should hide it using CSS through JavaScript, because if you do it this way, people who don't have JavaScript enabled but support CSS are able use the plugin player directly.
I found that setting height=0 width=0 worked the same as hidden=true and solved the problem
Actually, the Quicktime plugin requires that at least a 12px squared area be shown, otherwise it will not load, and the JavaScript API will not be exposed. The area detection is done at short intervals, and if the visible area is ever reduced, the playback is stopped immediately. The plugin is extremely good at determining if it can actually be seen, you can't event cover it with other elements.
Related
I want to display captions using the HTML5 Text Tracks API (WebVTT) using the native browser implementations -- without loading audio/video.
How can that be achieved ?
There is no way using the native implementation.
However, the Firefox implementation of WebVTT, vtt.js, is publicly available.
All you need to do is attach a timer while a video element is playing (or just to any custom event without a video) and apply vtt.js functions to the video / captions container.
Since the Firefox VTT implementation is derived from it, this is the closest you can come to native without using the default way of attaching to a video.
I am using the video tag for my page, and I am trying to exclude the fullscreen from the controls.
I see that the "controls" in general is only a true/false statement, but i am looking for a way to disable the fullscreen option from the video.
I could do controls false and use autoplay the video - Then i have no controls - and the video will just play.. - but i think this is too drastic a "solution".
So what kind of solution can be done to achieve what i am looking for ?
For browsers that incorporate a shadow DOM (e.g. newest version of Chrome), you can still use the default controls, but hide the fullscreen button.
Just be sure to include the following in your CSS:
video::-webkit-media-controls-fullscreen-button
{
display: none !important;
}
As shadow DOM manipulation like this becomes more commonplace, more browsers will hopefully support it. Until then, stick to making custom controls or putting the video within an iframe as long as your src points to an html file with a video tag in it, and you specify allowfullscreen="false"for the iframe.
controls is a binary state, you either have what the browser provides or you have nothing.
If you don't want the browser to provide a full screen control but still want a UI, then you'll need to turn controls off and implement your own UI with JavaScript.
How does one go about streaming video in HTML5 ? I can go with using a single browser of the latest version if I have to.I need to be able to start playing from any location of the movie even if the entire video has not been loaded by the browser.
WebRTC ?
I've already seen this question and no one has answered.
Does not allow the viewer to skip to the middle of a video in any
browser. They must watch the video straight through start to finish,
which is not ideal.
This is the main point for streaming.
Currently if you want to use pure HTML5 and work cross-browser you are limited to progressive streaming with the <video> element.
While that still does allow the user to skip ahead via the scrubber or programatically by setting the .currentTime there will still be some buffering while the browser re-loads enough content to be comfortable playing smoothly.
Solutions like Smooth Streaming, HLS do not work across browsers today so you would require a Flash or Silverlight plugin, though with MPEG-DASH being recognized by the W3C there is some hope for the future as samples like this demonstrate http://dash-mse-test.appspot.com/release-notes.html
For today however if you want to stick with an HTML5 solution and you have source in a format the works with the browser then you should be fine
Chrome has implemented the Media Source API in the mean time. Hoping the rest will follow.
http://www.w3.org/TR/media-source/
Abstract
This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.
On iOS, and I think Safari, we have Apples HTTP Live streaming, which can take a playlist of video files in a certain format, buffer them one by one, and play them seamlessly back to back.
Is there any way to achieve this in other browsers? I can of course detect the video finishing, and then start buffering and playing the next one, but I want to remove the buffering by downloading subsequent videos as each earlier video finishes. I do not want to hack this by stacking up video elements and switching between them. There are various serious consequences to this method.
Perhaps if there is a way to use javascript to download the files into in-memory buffers and somehow point the video element to play from these buffers?
I've seen swapping in video elements for each segment tried, and it's never smooth.
There is an HTML spec in the works that defines exactly the process you're describing, concatenating media segments into a buffer that can be fed into a media element.
http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
This isn't available in browsers today but is working its way into Chrome/Safari. Even when it is, it will take a good amount of work to implement this process.
Your best bet if you need it now would be to use a Flash player that can handle HLS, like OSMF, JWplayer, and soon Video.js.
In html5, you can preload videos, preload the meta information, or not preload at all. The only problem, of course, will be with Internet Explorer which will download everything or nothing at all (and not even show the controls).
This is all controllable with javascript, too. If you want to play them back-to-back automatically, though, this would need to be done with javascript or some third-party tool. Reading where the file is playing is accessible through the API.
I have a question. I know youtube has supported html5 for some time, so I just tried disabling the adobe flash plugin and took a look at the page source. I found no video tag. Could anybody explain that?
Using chrome, after disabling Flash, I do get a warning when trying to watch videos ("You need Flash!"), but it detects that I don't have flash, and uses the HTML5 version instead. If you use Chrome, you can look at the DOM with the developer tools (F12), and you'll indeed find a video tag in the video-container div, e.g.
<video class="video-stream" x-webkit-airplay="allow" src="http://o-o.preferred.twtelecom-dfw1.v15.lscache5.c.youtube.com/videoplayback?sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cexpire&fexp=900161&itag=43&ip=207.0.0.0&signature=55FCBF36A597656FECBEC8E78051B3BD30EE8D97.8F8D573710D767EAF4429FBC54C940DF7611A1BE&sver=3&ratebypass=yes&source=youtube&expire=1330650696&key=yt1&ipbits=8&cp=U0hSRVZQTl9OUENOMl9OSlJHOlBlcHJOMW9PSHhH&id=381980b5e867a1c5" data-youtube-id="OBmAtehnocU"></video>
For almost everything Google does on the web they use javascript. Most likely what is happening is that they test the browser to make sure it supports HTML5 video, they then load the the video dynamically using javascript.
To verify, use a web browser tool to inspect the current html as it's shown, not as it's sent to the browser.
And as Marius noted, be sure to have HTML5 enabled