CODEWITHSUNDEEP
html
Sawan mishra
Sawan mishra

Reputation: 701

html5 autoplay video in Mobile device

Auto play is not working without muted attribute, when I try to open url in mobile device. How to play video without using muted attribute ? I need to volume without click on muted button and one more important thing is that all thing will be working without JS and Jquery. enter image description here

Upvotes: 22

Views: 116040

Answers (9)

vinitha N
vinitha N

Reputation: 1

$(document).ready(function () {
    $(".reviews-container").on("click", ".glightbox[data-type='video']", function () {
        let videoSrc = $(this).attr("href");

        // Adding a delay before finding and playing the video
        setTimeout(() => {
            // Find the <video> element based on the <source> tag
            let videoElement = $(`video source[src='${videoSrc}']`).closest("video").get(0);

            if (videoElement) {
             
                videoElement.muted = false; 
                videoElement.play().catch((error) => {
                    console.error("Playback failed:", error);
                });
            } else {
                console.error("Video element not found!");
                // Provide fallback message or action
            }
        }, 300); 
    });
});

Upvotes: 0

H. E.
H. E.

Reputation: 31

If it is an angular project don't forget to write [muted]="'muted'". Normal muted attribute is not working.

So, 'Autoplay' is working well on mobile browsers as well in this code-snippet below:

<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
    <!-- My Dynamic Content -->
    <source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">

    <!-- My Default Content, displaying when dynamic content has a problem -->
    <source [src]="baseURL + '/assets/videos/film_home.mp4'" type="video/mp4">

    Your browser does not support HTML5 video.
</video>

Upvotes: 0

Gilbert123
Gilbert123

Reputation: 221

On Ios make sure you don't have energy-saving on. This makes it so the video won't play.

Upvotes: 22

Tugrul Yildirim
Tugrul Yildirim

Reputation: 231

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto"  id="myVideo">
        <source src="assets/video/1.mp4" type="video/mp4">
        </video>

This code worked for me on Ios and Android phone

Upvotes: 21

Hiren Pipariya
Hiren Pipariya

Reputation: 80

May be this will work for you

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

Upvotes: 0

Nelu
Nelu

Reputation: 391

I can't really make any sense of it but this managed to work on iOS Safari and Firefox (haven't tested Android):

<video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

...thing is, it only work after I set the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If anyone can actually explain why that happened, I'd really want to know. Otherwise...stay tuned for more wacky stuff :))

Upvotes: 1

bowl0stu
bowl0stu

Reputation: 350

Simply include defaultMuted inline with your video to enable sound on autoplay. For example,

 <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

Reference: http://www.w3schools.com/tags/av_prop_defaultmuted.asp

Upvotes: 5

Dan H
Dan H

Reputation: 3623

You wont be able to achieve this in iOS without hacks. From the official Apple WebKit documentation:

Starting in iOS 10, WebKit relaxes its inline and autoplay policies to make these presentations possible, but still keeps in mind sites’ bandwidth and users’ batteries.

By default, WebKit will have the following policies:

  • video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.

https://webkit.org/blog/6784/new-video-policies-for-ios/

As for Mobile Chrome (Android):

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set, and playback of muted videos can be initiated progamatically with play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

https://developers.google.com/web/updates/2016/07/autoplay

Upvotes: 38

Alessandro Gon&#231;alves
Alessandro Gon&#231;alves

Reputation: 16

Its simple see the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

You need check the browsers and the formats supported.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Upvotes: 0

Related Questions