I'm trying to play and go fullscreen for an HTML5 video element on an iPad/iPhone via JavaScript, but when I try videoElement.webkitEnterFullScreen(), I see an INVALID_STATE_ERR: Dom Exception 11.
My Code
For Example
Now, it looks like specific support for this behavior was added here:
which specifically prevents going fullscreen without a user gesture.
My question:
Is there a workaround for this?
I see that Vimeo's HTML5 video player is mimicking this behavior somehow as seen here
(on iPad/iPhone)
So, it seems it is possible. Am I missing something?
Testing on iOS simulator Ipad
Hope I can help someone:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", goFullscreen, false);
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
$(document).ready(function(){
init();
$("#myVideo").bind('ended', function(){
$('#myVideo')[0].webkitExitFullScreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video src="movie.mp4" id="myVideo" autoplay controls >
</video>
</body>
</html>
I used this and it worked for me
- (void) makeHTML5VideoFullscreen {
if(webView) {
[webView stringByEvaluatingJavaScriptFromString: #"document.querySelector('video').webkitEnterFullscreen();"];
}
}
Related
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I have a problem with creating a video player in my webpage. I have a list of video title and one video player using object tage.
My purpose: when i click on video title, it will load the video and play according to video's file.
Can anyone help me to solve this problem?
Try the demo
Test video<br>
Pentagon<br>
Cat Giraffe<br>
<video id="player" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
$(function(e) {
$('a').click(function(e) {
e.preventDefault();
var video_file = $(this).attr('href');
$('#player').attr('src', video_file)[0].play();
});
});
</script>
Can anyone tell me why webkitEnterFullscreen() using an external button works in Chrome and Safari, but not iOS?
In iOS, the button doesn't work even if I set the video to "visible". It appears to only work once the video is playing, then it will allow me to launch fullscreen. I can't script it either by using "this.play();", it only works when a human hits the play button.
I'm using an iPad 2 and iOS 5.0.1
<html>
<head>
<title>Fullscreen Video</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
// hide video
$("#myVideo").css({'visibility' : 'hidden', 'display' : 'none'});
// extend button functionality
$('#fs').bind('click', function() {
// display the video
$("#myVideo").css({'visibility' : 'visible'});
// launch the video fullscreen
$("#myVideo")[0].webkitEnterFullscreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video id="myVideo" width="852" height="480" controls="false" preload="false">
<source src="videos/myVideo.mp4" type='video/mp4' />
</video>
<br />
<input type="button" id="fs" value="Fullscreen">
</body>
</html>
Shouldn't you override the "display: none" when you override the "visibility: hidden"?
I position my video offscreen (-2000 with position: absolute), and I use:
<script>
var videoPlayFullscreen = function() {
$('video').get(0).play();
$('video').get(0).webkitEnterFullscreen();
};
</script>
I couldn't get it to work until I used the ".get(n)" if that helps. (which may be the same as what you are doing: $('video')[n].
But my fullscreen only works if the video is already playing, like yours, but the code above to get it to play works on the iphone4, and iPad 1st gen.
My issue: On the iPad 1st gen, the video plays on first click (first time videoPlayFullscreen function is run) and goes into fullscreen on the second click (second time the function is run). I am thinking it is not ready to do the fullscreen right away, so maybe a delay time before that would work?
The play code works on the iPhone 4 (which initiates fullscreen with just a play and doesn't use/need the webkitEnterFullscreen in my experience).
I think this code should play a sound, then show an alert box. It works with IE9, but with Chrome & Firefox, the sound is played, but the callback is never called - so no alert box.
I'm a c#, c++ programmer new to javascript, and I could use some help! Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var playAll= function(){
var audio = document.getElementById('s');
var callback = function(e){
alert("ended");
};
audio.onended = callback;
audio.play();
}
</script>
</head>
<body>
<input name="Button1" type="button" value="Play" onclick="playAll()"/>
<audio ID="s">
<source src="s.mp3" >
<source src="s.ogg" >
</body>
</html>
Just to be sure that it is not an issue of invalid html, use the following valid version
<audio ID="s">
<source src="s.mp3" />
<source src="s.ogg" />
</audio>
and then use the correct way to bind events.
audio.addEventListener( "ended", callback, false);
onended seems to be specific to IE9, Chrome and Firefox will fire the event ended, which you can bind a function to like so: v.addEventListener("ended", function() { alert("ended"); }
Remember that the HTML5 spec is still being developed, and not all browsers implement it the same way.
There's a similar question here: HTML 5 Video OnEnded Event not Firing
I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play
Is there a way to do this with the native video controls?
I'm using google chrome browser.
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
See it working on jsFiddle: http://jsfiddle.net/dgLds/
Here's how to do it:
var myVideo = document.getElementById("my-video")
myVideo.controls = false;
Working example:
https://jsfiddle.net/otnfccgu/2/
See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp
CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.
In HTML,
<div id="hideme">
<audio id="audioTag" controls>
<source src="/path/to/audio.mp3">
</audio>
</div>
with JS
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
In CSS,
#hideme {display: none;}