How to pause/mute S3 video which is embedded in an iframe? - javascript

We are hosting a careersites for customers, one of our customers provided the data which contains video from S3 which is embedded in an iframe.
Problem is the video is getting played automatically when page is loaded. Customer is asking to pause or mute the video on page load.
Is there any way we can pause the video?

Unless there is a special reason you need to use an iframe, the usual way to handle video now is with the HTML5 video tag.
This has an attribute 'autoplay' which if present will start the video automatically, and if absent will not start the video:
http://www.w3schools.com/tags/att_video_autoplay.asp
The following will autoplay (if the devices supports this - some mobile device do not to save on data charges):
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
and this will not:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Related

Replace background video with image if autoplay is not supported in vue js

I have a website with a background video. Many browsers especially mobile ones dont support autoplay even with muted videos. How can i detect if the browser isnt supporting autoplay and replace the video with an image. Im using vueJS.
<video autoplay class="background-video" loop muted> <source src="#/assets/video/background.mp4" type="video/mp4"> </video>
Use the poster attribute:
<video width="620" loop muted poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi">
</video>
source
Example with no video
Add the playsinline attribute for your video to autoplay on iOS.
(Most browsers support autoplay, as long as you also use muted.)

video tag only playing audio of local .MOV files AirDropped from iPhone

My code roughly looks like <video src={URL.createObjectURL(videoFile)} /> where videoFile is a local file from a file input. I have .mov files created from a Quicktime screen recording and the video tag will play the video and audio part of the file, but when I AirDrop a video recording from my iPhone (.MOV file) and try to play them, only the audio plays and the video tag is a black screen. There's something about iPhone video recordings that makes the video tag not play the video and only the audio.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<source src="video.ogv" type="video/mov">
</video>
here width and height depends on your requirements

Cross browser video autoplay loop

I have a copy of a mp4 video which I want to show on my website and I want to know how is it possible with javascript to autoplay and loop for ever the video.
I want to make it compatible with all browsers.
I want to load the video on load of the page with js
Thank you.
You’ll need to mute the video (adding the muted attribute on the <video> tag) as videos with sound don’t autoplay in all browsers. Then also add the attributes autoplay and playsinline. Also you can use the videoEnd event and call play() to ensure it loops.
<video autoplay loop>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
You mean this?

Autoplay video on mobile device

I've seen posts complaining that you cannot autoplay a video on mobile device.
But, this CAN be done. I've visited youtube website on android and iOS and video does indeed start to play without any user interaction. How can I mimic this behaviour?
EDIT: if you visit direct link, it does not work. If you first visit youtube.com and than click on some video, it works. No idea why.
<video id="mobilevideo" name="Mobile video" onLoad="play()" onClick="play()" preload="auto" autoplay preload muted playsinline webkit-playsinline>
<source src="file.webm" type="video/webm">
<source src="file.ogg" type="video/ogg">
<source src="file.mp4" type="video/mp4">
Your browser does not support this file type.
</video>
<!--Javascript autoplay video -->
<script>
document.getElementById('mobilevideo').play();
</script>
You can use autoplay in video tag. like this:
<video width="320" height="240" controls autoplay>
For more information, you can learn from here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
For mobile, you should not do auto play because it will cost user's bandwidth(money). See this post for more detail:
Can you autoplay HTML5 videos on the iPad?

Custom HTML 5 Video Playback

I'm creating a custom video playback to show off CAD animations of a product's features. I would like to have one viewing window, with three buttons to show the different product features. The video animations show the product front and center, then use exploding or zooming effects to show the features.
The tricky part is that I would like the video to play for a selected feature, ie feature 1. Then, when feature 2 is selected, I would like to have the video first play another video (feature 1 rewind), which shows the product returning to it's original state, then proceed in playing the next selected feature video (ie feature 2). I think the setup below might be correct, but am struggling on where to start with the javascript.
In sum, here is my desired playback functionality:
Select feature 1 button
Feature 1 video plays
Select feature 2 button
Feature 1 rewind video plays
Feature 2 video plays
Select feature 3 button
Feature 2 rewind video plays
Feature 3 video plays
Ideally, it wouldn't matter the order at which you selected the features, the above behavior would be the same (selected feature, video playback, next selected feature, rewind video playback, next feature video playback, etc.)
<!DOCTYPE html>
<html>
<body>
<!--Here is the setup of video assets-->
<div style="text-align:center">
<button onclick="playFeature1()">Feature1</button>
<button onclick="playFeature2()">Feature2</button>
<button onclick="playFeature3()">Feature3</button>
<br><br>
<video id="feature1" width="420">
<source src="feature1.mp4" type="video/mp4">
<source src="feature1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="feature1Rewind" width="420">
<source src="feature1Rewind.mp4" type="video/mp4">
<source src="feature1Rewind.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="feature2" width="420">
<source src="feature2.mp4" type="video/mp4">
<source src="feature2.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="feature2Rewind" width="420">
<source src="feature2-Rewind.mp4" type="video/mp4">
<source src="feature2-Rewind.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="feature3" width="420">
<source src="feature3.mp4" type="video/mp4">
<source src="feature3.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="feature3Rewind" width="420">
<source src="feature3-Rewind.mp4" type="video/mp4">
<source src="feature3-Rewind.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
//here is where I don't know how to approach the playback functionality.
var myVideo = document.getElementById("feature1");
function playFeature1() {
}
</script>
</body>
</html>

Categories