I have a bit of problem with streaming hls using video tag.
Originally I'm using flowplayer with the fallback flowplayer.ipad.js, it actually just generate video for using on fail to use flash (such as ipad).
ANW i see that it's use video tag for those device (i'm using it for android device too).
Simply said, this code actually can run on android:
<video id="testchoi" width="320" height="240" controls preload>
<source src="some_hls_stream_here.m3u8"/>
</video>
add type='application/vnd.apple.mpegurl' and it can run on ipad.
But put that aside, I want to asking that in android, if you change size while playing, it will get error. More specify, playing it and then go for fullscreen.
I think there's problem because google do not much support for hls (since it's apple standard ANW). Is there anyway to work around?
I'm trying to do something like:
beforeEnterFullscreen => stop video => enterFullscreen => reLoad video => play video. Any help in this too, I can't add the eventListener for fullscreen event
Found out the event for full screen in those device.
player.addEventListener('webkitbeginfullscreen', function(){
this.load();
this.play();
}, false);
player.addEventListener('webkitendfullscreen', function(){
this.load();
this.play();
}, false);
Last time i tried with webkitenterfullscreen, it's no use in mobile device.
And until now, i can just come up with above work around.
Related
I'm trying to add a next (or even previous) button to the notification Chrome will show on a Android (or even Apple) device when you are playing audio on a website (in the background). Clicking the button should fire a link or a JS function.
See below screenshot, I am using this code:
<audio controls autoplay onended="myFunction()">
<source src="<?php echo 'http://www.music.*****.com/music/' . $_GET['file']; ?>" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Screenshot from Android
If this is not possible, perhaps there is an easy way to make an app that can do this and fetch mp3's over http. I really just need a working solution, efficiency and looks are secondary as I am using this together with some friends only.
Thanks!
I am trying to play my webm video on my android.
my code is:
<video width="290" height="517" autoplay loop>
<source src="/assets/videos/livematch.mp4" type="video/mp4;">
<source src="/assets/videos/livematch.webm" type="video/webm;">
</video>
I tried without semicolons as well ...type="video/mp4"...
When I open the page the placeholder of the video is black.
When I am trying to download the clip (press and hold on it) it actually saves the mp4.
How should i write the code so it will automatically recognise the device?
Hey I would try to remove the type attribute like showed in the first link I provided. Otherwise you can try to manually call video.play() like showed in the second link.
Playing HTML5 Videos in Browser -- What Works for Most Android Devices?
HTML5 <video> element on Android
Quite simple, I have a <video> tag as follows:
<video id="video" controls preload>
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Fairly standard. However, I'd like the video to open up on mobile devices using the built-in media player, essentially like watching a YouTube video from Safari on an iPhone.
How could I achieve this? The mobile site is built using jQuery Mobile.
Also, I think I read somewhere that removing the type attribute from the <source> tag increases compatibility. Is this true?
Update:
If you are trying to play the video file from an Hybrid android application, then below code should be of use for you. To play HTML5 videos in Android Native player here's a small piece of Java code to use -
Intent intent = new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”); //Specify the video file path
intent.setDataAndType(data,“video/mp4″);
startActivity(intent);
Now invoke the above Java native code using your JavaScript function passing the video element or path shown above and you should be good with your player.
To answer your second question, i think that removing type attribute doesn't increase the video compatibility in mobile phones as its a mandatory attribute to be set for the native player to know the encoding of the video file.
Video.js is compatible across most browsers but you have to set the viewports etc for mobile browsers.
This tutorial could probably help you out a little more.
You could try using the emerging HTML5 Fullscreen API to do this. It looks supported in iOS5+ and Android 4.0+
Take a look at this tutorial or read the full spec.
And I've not heard of any benefit to removing the type attribute. Taking that out would likely cause problems.
I'm trying to use mediaelement.js UI for streaming hls in iPad, iPhone and Android.
The html is a-like as follow (sry I can't public our hls links):
<video src="testinghls.m3u8"></video>
And the script:
$('video').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// specify to force MediaElement to use a particular video or audio type
type: 'application/x-mpegURL',
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false
});
That work fine with iPad and iPhone but fail with Android. It's just somehow detect that the video cannot play and fall back to download link.
Beside I have tried out the pure video tag with hls, it's working fine with or without the type in both iOS and Android devices like the two below:
<video src="{{c.get('hls')}}" type="application/x-mpegURL" style="width:320px;height:185px" controls></video>
<video src="{{c.get('hls')}}" style="width:320px;height:185px" controls></video>
How should I config the Mediaelement to make it work? Or perhaps some tweaks/modifies with the Mediaelement.js ?
It could be an video encoding issue. Android requires a certain encoding and this is a noted issue in MediaElement.js
A solution to this is suggested in this
I'm creating a web page using HTML5 in order to have a mp4 video on it, I already accomplished this but, I trying to add some functionalities like autoplay, autobuffer and loop using this code
<video id="video" width="320" height="240" src="http://.../TCLAST.mp4" controls autobuffer autoplay loop>
But nothing so far, one more thing I want to display this page on the Motorola XOOM. I have used different browsers like dolphin, skyfire, firefox and the default browser.
You can try videojs ( http://videojs.com/ ) and play the video on DOMReady. Using the video JS API. This will also give you the benefit of being iDevice compatable.
The XOOM in its current form is very picky about video. Have you verified that the video you want to play will play in the native player?
For more information, look here:
http://forum.xda-developers.com/showthread.php?t=1026570&highlight=video
http://forum.xda-developers.com/showthread.php?t=1021461&highlight=video
Here the Demo
http://jsfiddle.net/dineshk/fvnr0zex/2/
This Will work when the video tag append using Javascript.
Here the Javascript code
var newHtml = '<video width="100%" height="30%" autoplay controls id="myVideos" src="https://dev.ocutagsnap.com:8080/PearsonVideos/videos/tumb10.mp4" ></video>';
$("#newone").append(newHtml);