I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!
My HTML:
<div id="video_container>
<video id="video1" width="1280" height="720" controls autoplay>
<source src="videos/ballet.mp4" type="video/mp4">
<source src="videos/ballet.webm" type="video/webm">
<source src="videos/ballet.ogv" type="video/ogg">
</video>
</div>
My JavaScript:
$(document).ready(function(){
$('#video1').bind("playing", function(){
var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
$('#video1').bind("ended", function(){
$("#video_container").hide();
});
});
Sounds like you can't make the video fullscreen on page load, at least not for webkit browsers. According to the Safari Developer Library:
The webkitEnterFullscreen() method can be invoked only in response to
a user action, such as clicking a button. You cannot invoke
webkitEnterFullscreen() in response to a load event, for example.
Full article here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
Related
As can be seen in the Codepen (https://codepen.io/MrKoga/pen/PomGezw), in Safari the video controls trigger a click event on the video element. In Chrome they do not.
HTML
<video id="videoClick" controls width="250">
<source src="https://example.com/media/moviewebm " type="video/webm">
<source src="https://example.com/media/movie.mp4 " type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
JS
document.getElementById("videoClick")
.addEventListener("click", () => console.log("video clicked"))
How do I to prevent this behavior in Safari? Thanks!
I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?
You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen
I am using the Metro UI Template, but I have a problem with the dialog when using Videos. When I close the dialog, the video continues playing.
The code I have is:
<script>
function showDialog(id){
var dialog = $("#"+id).data('dialog');
if (!dialog.element.data('opened')) {
dialog.open();
} else {
dialog.close();
}
}
</script>
Then the dialog is called by:
<div data-role="dialog" id="video" class="padding20" data-close-button="true" data-overlay="true" data-overlay-color="op-dark">
<h2>Title of Video</h2>
<video width="800px" controls="controls">
<source src="videos/video.mp4" type="video/mp4">
Your browser does not support the HTML5 Video element.
</video>
</div>
Does anyone know how I can stop the video when the dialog is closed?
OK, so I have managed to resolve the issue.
I placed the video in an iframe, then refreshed the iframe when the dialog is closed using the code I found here http://www.codingforums.com/html-and-css/168580-refresh-iframe-without-page-refresh.html
I've made a jquery script to pause the background music on click a video but it don't work. Can anyone help me?Here's my javascript:
<script src="../style/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#trailer").click(
function(){
$("#bgm").get(0).pause();
}
)
}
);
</script>
Here's my HTML:
<video height="340" width="864.5" id="trailer" onclick="goFullscreen('trailer');">
<source src="video.mp4" type="video/mp4">
</video>
<embed src="sound.mp3" hidden="true" autostart="true" loop="true" id="bgm"></embed>
Anyway, my embed mp3 can't loop too, can anyone correct it for me?THKS.
probably the embed element does not have the HTMLMediaElement interface which includes the pause() method. you can use the HTMLAudioElement <audio> instead.
than: access the audio element directly from your click event handler.
$("#bgm").pause();
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me