Is there a ready to use code or some sort to enable the fullscreen button on Safari for the ?video? Currently when the video is loaded, and click on it doesnt work.
<video width="320" height="240" controls="controls" name="media" src="urlvideo">Text</video>
What types are supported for the video tag?
Do i need to use type=audio/mp3 for playing mp3 and type=audio/wav etc....?
By they way, the video ui looks different on each browser or not working at all... is there a way to have them all the same look and feel and have them all work on all browsers?
purely css, you can target it with video::-webkit-media-controls-fullscreen-button{}, and you'll want to reference this http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/mediaControls.css
To play video when user clicks on it:
document.querySelctor('video').addEvenetListenr('click', function(){
this.play()
}, false);
To have fullscreen use Webkit and Gecko full screen API
First, not all browsers have the same video codecs, so not all browsers can play the same videos. I would suggest looking here to choose a format that is supported by the browsers you are targeting:
HTML5 Video Codec Support By Browser
For Safari specifically, I have gotten this JavaScript to work to get a video to play fullscreen:
var vid = document.getElementById('video');
vid.webkitEnterFullscreen();
vid.play();
Also, check out this thread: Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Hope that helps!
Related
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
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 had been using the flash based JWPlayer 4 with the playlist option. Recently I upgraded to JWPlayer 5 which is claims HTML5 support. The player by itself degrades nicely on mobile devices that support HTML5 but not flash, however it breaks with the playlist option enabled.
So can someone tell me either what I'm doing wrong with JWPlayer 5 and how to get it to work with the playlist option for mobile devices, or perhaps just teach me a better way to set up a video and a playlist with HTML5?
Resources
JW Player and playlist configuration example page
Example of the JWPlayer and Playlist layout:
This is not JW Player specific answer.
Browser's native HTML video tag behaves weird if you replace tags. Instead you should set single src attribute directly in tag. By that way you can change that attribute in DOM. Before changing it, try to pause the playing video first.
I use mediaelementjs.com. It works pretty well.
It doesn't come with built-in playlist feature but you can easily build one by yourself. After all, playlist is just a list of videos that when you click on one, you go change the source of the video.
Media element has setSrc() function that supports both HTML5 and flash fallback. It works from me.
Voila un bout de script pour jwplayer 6.7 et playlist youtube
<script>
jwplayer("myElement").setup({
width: "100%",
height: "400",
playlist: "http://gdata.youtube.com/feeds/api/playlists/PLMIePZMXPqnYlsvE_PFwe-_e336HlJF7g?max-results=50&alt=rss",
stretching: "exactfit",
primary: "flash",
sharing: {link: "http://www.centraltv.fr/egypte-television/rotana-masriya"},
autostart: "true",
listbar: {
position: "right",
size: "220"
}
});
</script>
This isn't answer to your main question. It's just some general tips.
Upgrade. I had some trouble with 5.6 not playing on mobile devices, and upgrading to 5.8 fixed it.
Avoid autoplay at the moment. I've had some issues with the player not loading. It might be due to a timing issue on loading large media files, and javascript trying to begin playing. Also, for linux users with a slower connection (like me at 3mb dsl), when the playhead catches up, and the buffer is empty, the player stops functioning.
Maybe override the mode. For my media, html5 seems to play a little better.
modes: [
{ type: "html5" },
{ type: "flash", src: "/media/player.swf" }
]
Try to use the same height/width as your media.
If you are playing audio only- it can be hard to find the (centered) play button if your width is a large value.
I'm not using the playlist. I have a list of recordings on the page, and a button to load a popup/dialog.
These links might be helpful:
HTML 5 video or audio playlist
PagePlayer
JW Player 5
Generate a Playlist for HTML5 Video
If you are just using YouTube videos, they offer a (beta) HTML5 video player: http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html
I use the HTML5 video player on this site: http://www2.highpoint.edu
And older versions of IE cannot use that player (very well), so I still use Flash embed tags for those browsers instead which are done via the YouTube js api: http://code.google.com/intl/en/apis/youtube/js_api_reference.html
Here is an example page: http://www2.highpoint.edu/youtube.php?id=ht1PrQkE3WU
I highly recommend mediaelementjs if you need to roll-your-own video player. All videos on our site are hosted by YouTube, but we still use it as an audio player, as seen here: http://www2.highpoint.edu/president.php?mp3=http%3A%2F%2Fwww2.highpoint.edu%2Fmp3%2FNQ_LI013107.mp3
JWPlayer's last version supports HTML5 playback as well. Now it can also be used in mobile devices that do not support flash.
Another HTML5 video player with flash fallback is videoJS ( http://videojs.com/ )
swf is not supported by mobile device
i think this is useful but need two type file
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" /> <!-- for iPad :) -->
<source src="movie.ogg" type="video/ogg" /> <!--for windows -->
Your browser does not support the video tag.
</video>
and i try javascript to change movie and it worked in both
you must be use this because i have an ipad and i cant open the swf based video player's video
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).
I've used the HTML5 tags to create an audio player to play a live stream. This plays the stream perfectly however I'd like to reszie the player. I have tried adding width="XXX" height="XX" to it and it makes no difference.
I really want to use HTML5 for this. Is there any way to fix this?
(Browser Safari)
Try the following
<audio tabindex="0" controls="" preload="" id="player1">
<source src="http://terrillthompson.com/music/audio/smallf.mp3" type="audio/mpeg"></source>
<source src="http://terrillthompson.com/music/audio/smallf.ogg" type="audio/ogg"></source>
Your browser does not support HTML5 audio.
</audio>
My first try I was getting the resize too, this seems to fix the issue when starting to play it. If the user "seeks" it still wants to resize...aww crackers XD
It seems to resize because of the (controls="") if we could add an event listener for ("onseeking") and some how reset "controls" back to "blank" that may do it...just an idea at this point, im unsure how to test.
Something like this may help/work
var audio = this.audio;
audio.addEventListener('seeking', function() {
finish(somehowresetcontrolstoblank);
}, false);
Hopefully this gives someone an idea they can run with :)
Sorry I can only answer half the question