I have a simple video tag:
<video id="video-1" poster="img/video/poster-1.jpg" preload="none">
<source src="http://player.vimeo.com/external/the_video-id" type="video/mp4">
</video>
I play it via a javascript button
$('[data-play-video]').click(function(){
var video_id = $(this).data('playVideo');
var video_control = $(video_id)[0];
video_control.play();
});
The video plays inline on the desktop and in the full-screen player on iPhone. On iPad it plays inline, but I want it to play full-screen in the default iOS video player—the same as on the iPhone. How can I achieve this?
I am aware of the webkit-playsinline attribute which may be used to force the video to play inline on the iPhone. (HTML5 inline video on iPhone vs iPad/Browser) and (Can I avoid the native fullscreen video player with HTML5 on iPhone or android?)
I, however, want the opposite: to play the video in the default-for-iPhone full-screen format on all iOS and Android devices.
You can use webkitEnterFullscreen() method.
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", addFullscreenButton, false);
}
function addFullscreenButton() {
if (vid.webkitSupportsFullscreen) {
var fs = document.getElementById("fs");
fs.style.visibility = "visible";
}
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
Related
I've tried various native listener with <audio> element on mobile device with control panel. However, Turning off the screen after playing the audio, the audio wouldn't pause but i saw m.youtube can do that. So, how could i pause the audio when turned screen off?
<audio controls loop id="a">
<!-- <source src="MerryChristmas.mp3" type="audio/mpeg"> -->
HTML5 audio not supported
</audio>
var audio = document.getElementById('a')
var source = document.createElement('source')
source.type='audio/mpeg'
source.src='./MerryChristmas.mp3'
audio.appendChild(source);
You could try the visibilitychange event. I haven't test it, so I'm not sure if it will work, but the DOCS seem like it should
document.addEventListener("visibilitychange", function() {
audio.pause();
});
EDIT: Changed to document.addEvent... from window.addEvent...
HTML5 video autoplay doesn't work on phones and tablets.
I checked on the phone with Android 4.2.2 in Chrome 60 and iPad. Also, I checked on the phones with Android 4.2.2 and 7.0.
I tried to use such scripts:
// 1
$(window).load(function () {
$("video[autoplay]").get(0).play();
});
// 2
$(window).on("scroll", function() {
var video = $("video[autoplay]").get(0);
if (video.paused) {
video.play();
}
});
// 3
$(window).on("touchstart touchmove touchend touchcancel", function () {
var video = $("video[autoplay]").get(0);
if (video.paused) {
video.play();
}
});
HTML:
<video id="video" autoplay="" loop="" playsinline="" muted="">
<source src="videos/video1.mp4" type="video/mp4">
</video>
The first variant doesn't work at all.
The second one runs scripts inside of it, but the video doesn't play.
The third one runs scripts inside of it, but the video play only on the click!
Here is codepen.
Here is website
Autoplay will not work with mobile browsers because mobile will be on network data, and if any auto play video starts playing, then it will consume data without user's permission and knowledge. So this is disabled for mobile browsers by default.
But still you can check these url for your solution:
Since the release of iOS 10 Apple has allowed video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/
Chrome 53 on Android also allowing video autoplay: https://developers.google.com/web/updates/2016/07/autoplay
I have made a website which we use on a TV to welcome guests/customers to our business. There's a SQL database which we write their names to be presented on the screen, and there is also a video which is playing in a different frame on the same website.
This all works very well on desktop PC Chrome. But we use the built in browser in the TV (which is a business model used for stuff like this). The browser is Opera and it supports HTML5.
Problem is that after a while, can be 2 hours, can be a day, it will stop playing the video, and just show a black frame.
This is the code:
<source src="video/video1.mp4" type='video/mp4'/>
</video>
<script type='text/javascript'>
video_count =1;
videoPlayer = document.getElementById("video");
function run(){
video_count++;
if (video_count == 3) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
videoPlayer.loop();
};
</script>
This will play the files named video1.mp4 and video2.mp4... etc. Right now there is only one file in this folder called video1.mp4, and it will autoplay and it will loop. But it will fail to autoplay after a while and just show a black frame.
Any ideas?
Thanks!
I'd recommend looking into video events with javascript in this case if you're starting to see bugs.
For example (from Detect when an HTML5 video finishes post) you could start playing your next video like this:
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
You could simply move on to the next video, or seek back to 0 on its timeline and play it again. The other option if you're wanting to loop 1 video, you'd be better using the loop option in your <video> tag:
<video loop>
<source src="video/video1.mp4" type="video/mp4">
</video>
I'm setting up a video portfolio site to showcase different concepts for software devs, and there are often multiple versions of the same video.
I wrote the following javascript to change videos and it works fine locally, the problem is that once its hosted changing videos breaks the video player. I'm guessing the cause is because the new video is not loaded. Any ideas?
function switcher(wrapper, e, source, container, video){
//get current version and turn off its style
var off = document.getElementById(wrapper).getElementsByClassName("versionActive")[0];
off.className = "version";
//turn on the new button
e.className = "versionActive";
var videoSource = document.getElementById(source);
var videoContainer = document.getElementById(container);
lastPlayingVideo.currentTime = 0;
lastPlayingVideo.pause();
lastPlayingVideo = videoContainer;
videoSource.setAttribute('src', video);
videoContainer.load();
videoContainer.play();
}
The html for the video player looks like this:
<video id="container1" controls="" loop="" preload="auto" width="1280" height="720">
<source id="video1" src="videos/Reminder.mp4" type="video/mp4">
</video>
Try :
videoContainer.addEventListener('canplay', function() {
videoContainer.play();
videoContainer.removeEventListener('canplay');
});
videoSource.setAttribute('src', video);
videoContainer.load();
canplay is fired when the browser supposes you have received enough of the file and you can continue playing it considering your connection speed.
I started using this great plugin : http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/
The problem is that when reaching a slide containing a video, sometimes it does not start (in chromium at least). No errors thrown, it just seems to be a random behavior regarding to the video loading.
Any idea if there's a way to keep firing the browser detection or to try forcing the video play with some plugin options/controls?
Also, I could not find a way to add a play button to the page to play/pause the video...
Found it, you need to get your element, and then call the play() function :
The html for the video :
<video id="vid_1" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
Your browser does not support HTML5 videos.
</video>
Then get the video element and fire the play :
//video play button
$('.play_button').click(function(){
var video = $('video#vid_1').get(0); //get the native browser source
if (video.paused) {
video.play(); //if paused, play
}
else{
video.pause(); //if playing, pause
}
});
So basically you can call it whenever you want...