when I use the HTML5 <video> element in the iPhone iOS Safari browser and I click on the placeholder it in order to play the video, the full-screen video player is started...
The problem is that especially when user is connected over GPRS/EDGE bearer it takes some time until the video can be started (something must be cached...).
If the user meanwhile presses the "Done" button and returns back to the page and then tries to launch the video player again nothing happens until some part of the video is cached and from user point of view it looks like the video link does not work... Is there any way how to deal with it? Listening for some event, etc.
<html>
<head>
<script type="text/javascript">
function playvideo()
{
var elem = document.getElementById("id-video");
elem.play();
}
</script>
</head>
<body>
<video
id="id-video"
width="200"
height="160"
src="space.mp4"
>
</video>
<input type="button" value="HTMLPlay" onClick="playvideo()"/>
</body>
</html>
BR
Petr
The only thing you can easily do is reduce the size of the video file. This doesn't have to effect all users, just those on slow internet connections (which you can detect this way).
Related
I have an little site with a video. Its a YouTube Video.
But if fancybox show up, the video it will not autostart.
Here is my code:
<section class="contact bg-primary" id="video">
<div class="container">
<h2>Videoteaser</h2>
<a data-fancybox data-width="640" data-small-btn="true" data-height="360" class="btn btn-outline2 btn-xl js-scroll-trigger"ata-small-btn="true" href="https://www.youtube.com/watch?v=MkCbpgUpkMo">Videoteaser</a>
</div>
</section>
To open up automatically I have this little JS on the bottom of the site:
$('[data-fancybox]').eq(0).trigger('click');
The Problem ist that the video do not autostart. No matter if I click on the button or if I use the little JS to autoopen the fancybox.
Only after klicken the Play-Button the Video do start.
How can I make ist autostart?
You are using Chrome, right? Then the answer is simple - it will not start due to Autoplay Policy Changes, see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Other then that - it works fine https://codepen.io/anon/pen/pqyzEM?editors=1000
I am newbie JS and Wordpress user/developer.
I want to play an audio in background when a page loads. Also, would like to pause the same audio if I click few set of buttons.
I tried using plugins (obviously being a noob), however I can get a sound bar, and a play pause button. But, cannot connect set of buttons to the action.
How to do I achieve this for events like on load or on click?
Pause button:
<button onclick="pauseAudio()" type="button">Pause Audio</button>
Audio:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JS Script:
var audio = document.getElementById("audio");
function pauseAudio() {
audio.pause();
}
audio.play();
I think the code is all pretty straight forward. Basically, you get the video element, and just run .play() on it. Add to a button's onclick pauseAudio() which will run the function and pause the video.
Hope that helps!
Or...
<button onclick="document.getElementById("audio").pause();" type="button">Pause Audio</button>
and on the <body> tag:
<body onload="document.getElementById("audio").play();">
Something similar to that should get you going!
This works for videos or audio, I've update this to be more for audio, though the premise is the same.
I'd like to load a video to play on desktops and tablets, but prevent it from loading on iPhones because it's just a graphical element.
Here's my code:
<video width="980" height="400" poster="/poster.jpg" autoplay loop>
<source src="/images/front.mp4" type="video/mp4">
<source src="/images/front.webm" type="video/webm">
Your browser does not support the video tag.
</video>
How can I tell iPhones to not load the video but just display the poster frame?
Thanks.
Something like this should work:
<script>
var videoElement = document.getElementsByTagName("video")[0];
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
videoElement.parentNode.removeChild(videoElement);
videoElement.pause();
}
</script>
This assumes you only have one video element on the page.
Also, be sure to put the JavaScript before the closing body element or put it in an external JavaScript file.
I was wondering whether anyone has tried to use the new tag that comes with HTML5 on the iPhone.
Specifically, I didn't manage to make the pause() command to work.
Below is a portion of the page. As you can see, I'm trying to pause the video 10sec after it started. It works on Safari on a Mac btw.
Has anyone managed to make this work?
<head>
<javascript language="JavaScript">
function timeUpdate()
{
var myVideo = document.getElementsByTagName('video')[0];
var time = myVideo.currentTime;
if (time > 10)
{
myVideo.pause();
}
}
function addListeners()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('timeupdate',timeUpdate,false);
}
</script>
</head>
<body onload="addListeners()">
<video controls src="resources/bb_poor_cinderella_512kb.mp4"
poster="resources/background.png">
Video tag not supported!
</video>
</body>
Thanks,
Ariel
This code is invalid:
<javascript language="JavaScript">
There is no HTML tag called <Javascript>
To set the language to javascript, you should use this:
<script type="text/javascript">
// Code here
</script>
Note that the language attribute is deprecated according to the W3C standard (http://www.w3.org/TR/REC-html40/interact/scripts.html) so you should use type rather than language.
As far as i know iPhone wont let you play video inline in the mobile safari browser.
So pausing wont work ofcourse. iPhone open the video in an external videoplayer, you dont have control over browser features, so the pausing doenst work.
You should use <script>, not <javascript language="JavaScript">.
I have my standard video tag which is playing fine in Chrome;
<video width="x" height="y" src="video.mp4"></video>
The video itself plays fine on the iPhone, however, is there no way to listen for events? Any kind of event? I'd like to use the 'ended' event, but even a 'click' or 'play' would be helpful!
The standard
video.addEventListener('ended', function() {
alert('this adds nothing');
}, false);
doesn't work at all, and nor can I track a click event (In the same way) on the video tag.
If not, would it be possible to perhaps add a transparent over the top of the video, track a click event to that as normal but then fire the play event for the video so that the video loads in the separate window as normal?
This works perfectly for me on an iphone/ipad/safari/chrome
$('#video_1').bind("ended",videoFinished);
function videoFinished(e) {
console.log("im done); }
Here is an example from Safari HTML5 Audio and Video Guide
<!DOCTYPE html>
<html>
<head>
<title>Sequential Movies</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v";
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event -->
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended',myNewSrc,false);
}
</script>
</head>
<body onload="myAddListener()">
<video controls
src="http://homepage.mac.com/qt4web/sunrisemeditations/A-chord.m4v"
>
</video>
</body>
</html>