<video controls autostart muted>
<source src="music/1.mp3" type="audio/mp3">
</video>
I tried embed,but it can't auto play.
You can do that with autoplay attribute, example from w3schools:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
A note for autoplay attribute by Mozilla:
Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.
Related
I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I just finished reading this article on why autoplaying video is bad http://www.punkchip.com/autoplay-is-bad-for-all-users/. I knew autoplaying was a bad practice but this video gave me good, tangible reasons why its not a best practice.
My question, sites like YouTube, KickStarter and ProductHunt DO have autoplaying video, the catch is the audio is muted.
I'm working on a site for a client now, more specifically a page in which the client might request the video be autoplayed. Obviously this behavior would not be acceptable on with sound, but how about if I muted the sound by default and provided a volume button like ProductHunt?
And just replaced the video with a poster image on mobile? Thoughts?
Thanks.
If you will be using the HTML5 player native to the browser. HTML5 video does provide the ability to mute a video and autoplay it. You simply have to include the 'muted' and 'autoplay' properties in your video tags in addition to the 'controls' property so that users have the ability to play,pause, unmute etc, as an example, the code would look like this:
<html>
<body>
<video width="320" height="240" autoplay controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The muted attribute of the video tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
I have a video file being transferred to my server. As soon as the video starts arriving I begin playing the video via the "video" html5 tag. However, if there is any sort of pause in the transfer of the video, the video stops playing (as expected.) Is there any way (I expect it would be via javascript), to automatically start playing the video where it left off as more of the video bits arrive on the server? I've noticed, if I add the "controls" and the video pauses, hitting the "play" button, starts the video from the beginning again. I just want it to continue playing where it left off. Is that possible?
How about set autoplay
<video id="myVideo" autoplay>
<source
src="http://yourSite.com/yourPath/video.webm"
type='video/webm'>
<source
src="http://yourSite.com/yourPath/video.ogg"
type='video/ogg'>
<source
src="http://yourSite.com/yourPath/video.mp4"
type='video/mp4'>
</video>
Add the "loop" attribute to your video element like so:
<video loop>
<source
src=videos/video.webm
type=video/webm>
<source
src=videos/video.ogg
type=video/ogg>
<source
src=videos/video.mp4
type=video/mp4>
</video>
I am using html5 audio but this is not working for internet explorer.
<audio id="beep-voice" controls autoplay style="opacity:0"></audio>
Please suggest me solution.
Thanks
The audio-tag is supported in IE9+. See this site for more information:
http://www.w3schools.com/html/html5_audio.asp
You aren't adding any audio. Try the code below and change the source:
<audio id="beep-voice" controls autoplay style="opacity:0">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.
Previously I would have done this via Flash and FLVPlayback, but I would prefer to steer clear of Flash in the HTML5 sphere. I'm thinking I could use javascript's setTimeout to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way FLVPlayback would?
The loop attribute should do it:
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The addition of the unintuitive muted attribute is required by Chrome as documented on their dev site.
Should you have a problem with the loop attribute (as we had in the past), listen to the videoEnd event and call the play() method when it fires.
Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.
Note2: loop="true" and autoplay="autoplay" are deprecated
As of April 2018, Chrome (along with several other major browsers) now require the muted attribute too.
Therefore, you should use
<video width="320" height="240" autoplay loop muted>
<source src="movie.mp4" type="video/mp4" />
</video>
For iPhone it works if you add also playsinline so:
<video width="320" height="240" autoplay loop muted playsinline>
<source src="movie.mp4" type="video/mp4" />
</video>
You can do this the following two ways:
1) Using loop attribute in video element (mentioned in the first answer):
2) and you can use the ended media event:
window.addEventListener('load', function(){
var newVideo = document.getElementById('videoElementId');
newVideo.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
newVideo.play();
});