Menu
I'm designing an html5 page for Android 4 smartphones with a single 3gpp (or mp4) video that has to autoplay fullscreen when opened; when video ends should redirect to another url .
Some googling told me that autoplay is no more allowed on Android 4, so I chose to display a poster image the user has to click to start the video. Then:
2 and 3 are not working: after invoking fullscreen the user have do another "click" to start video and when video ends exitfullscreen does not work (screen is black and user have to press "back" key on the phone to exit from the phone's video player).
Looks like video.webkitExitFullScreen() and video.play() are ignored on Android 4.
This is the html5 markup and javascript code I'm using, could you please help pointing me to a solution?
Thanks!
<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.google.com";
}
function playVideo() {
var video = document.getElementById("video");
video.addEventListener('ended', videoEnd, false);
video.webkitEnterFullScreen();
video.play();
}
</script>
</head>
<body>
<video id="video" poster="../img/image.jpg" onclick="playVideo();">
<source src="../video/videoname.3gp" type="video/3gpp" />
</video>
</body>
842
For playing the videos on web browsers, there is a new type of video element designed that is HTML5. If you see the message “HTML5 video not found” while playing a video on a web page, it means your browser doesn't support the HTML5 format codecs or missed some video codecs.
I have some suggestion which might help you,
This will be applicable for the Android web view Application not android web application.
You can either create the android hook up or the android web view client, the pass the values as the variable (Query String) and play the video from the Android native, where you have all the control.
Please find the code for the playing the video.
enter code here
public void videoPlayer(String path, String fileName, boolean autoplay){
getWindow().setFormat(PixelFormat.TRANSLUCENT);
//the VideoView will hold the video
VideoView videoHolder = new VideoView(this);
//MediaController is the ui control howering above the video (just like in the default youtube player).
videoHolder.setMediaController(new MediaController(this));
//assing a video file to the video holder
videoHolder.setVideoURI(Uri.parse(path+"/"+fileName));
//get focus, before playing the video.
videoHolder.requestFocus();
if(autoplay){
videoHolder.start();
}
}
If you want to implement kind of bright cove then contact me i will help for the HTML 5
Cheers
124
I know this is an old post, but someone may be looking for this. Personally I just hide the video-element (with a simple jquery $videoElement.hide()) after the video finished, which brings me back to the browser automatically.
We have tested this on several mobile devices (iOS and Android).
I still have another problem though, which is that now my browser seems to be fullscreen (which causes other problems in my case).
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
