CODEWITHSUNDEEP
htmlgoogle-chromehtml5-video
Ichi_The_Killer
Ichi_The_Killer

Reputation: 11

Video won't load in Chrome but works in Safari

I need to load a 30sec mp4 video. When I load my HTML in Safari, it works fine everything loads and the video plays; however, when I load my HTML file in Chrome, the video file does not load. I have a template file with the same code (different video) that does load the video in Chrome.

Could it be a problem with the video file? It's .mp4 but it doesn't have H.264 as a codec.

Here's my HTML for the video:

<section id="video">
    <!--video width = "640" height = "480" autoplay = "false" controls>-->
    <video width = "540" height = "380" controls>
    <source src="video/manchester.mp4"/>
</section>

And CSS:

section #video {
    position: relative;
    float: right;
    width: 50%;
    margin-top: 100px;
}

I'm using Mac OS X, and I exported the video file via iMovie.

Upvotes: 1

Views: 5036

Answers (2)

claudia edelman
claudia edelman

Reputation: 11

adding muted to the video tag solved my problem as well as adding webm version

see code:

            <video autoplay poster="img/video/bg-video-1.jpg" id="bgvid" loop muted> 
                <source src="img/video/video.webm" type="video/webm"> 
                <source src="img/video/video.mp4" type="video/mp4">
                <source src="img/video/video.ogg" type="video/ogg">
            </video>

Upvotes: 0

nullability
nullability

Reputation: 10677

Safari will try to play all video content with Quicktime, so it will be very forgiving of what format it is in. In order for it to play in Chrome, however, the file must be H.264 or WebM. See this link for information about what formats are supported: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

For the best compatibility, you should have your video available in at least H.264 MP4 and WebM, and make sure you keep your H.264 profile to Main 3.1 or similar to ensure it plays on mobile devices.

Upvotes: 4

Related Questions