The video is intended to autoplay but it is making the slider not appear at all... it breaks it... It works only on safari but not on chrome or firefox
<video id="video1" width="945" height="600" controls>
<source src="http://fistart.org/videos/FistArt.mp4" type="video/mp4">
Your browser does not support the video.
</video>
<script>
var myVideo=document.getElementById("video1");
myVideo.onloadeddata=myVideo.play();
</script>
Related
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.)
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?
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>
I have used 5 video in htmt5 video element as a slider. It is not working on Android and iPhone device. Just only show a single image. This is my site http://devpgc.buysidedesign.com/
I have used following code
<video id="video" autoplay loop muted>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.mp4" type="video/mp4"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.webm" type="video/webm"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.ogg" type="video/ogg"/>
</video>
I have also try to follow this link HTML5 <video> element on Android but no luck. Please tell me the solution.
Try this:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Source
I need to play a video in my web page. I used following code for test it. Result display player but won't play the video. I used updated chrome as my web browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<video controls=controls>
<source src = "q.mp4" type="video/mp4"/>
</video>
</body>
</html>
Note- my video and the web page is contain in same folder.
I change the source as following
<video width="400" height="300" controls>
<source src="video.m4v" type="video/mp4">
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
</video>
Now webm file plays in my waterfox browser but same result on chrome and IE
Try providing appropriate codecs for all the video files. Like this:
<video width="400" height="360" controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
Your browser does not support the video tag.
</video>
There are two ways you can do this
use a J query Plugin Like video.js or go with HTML5
here's the link
Playing video is tricky, you can try this
<video width="400" height="300" controls>
<source src="q.mp4" type="video/mp4">
<object data="q.mp4" width="400" height="300">
</object>
</video>
The encoding of your mp4 file might not be supported by chrome
chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
If above doesn't work you can try flowplayer It will try to play the video with html5 first then fall back to flash player.