html5 video in chrome only plays with autoplay? - html

I've got the following code for a HTML5 video, which works fine in all browsers except Chrome:
<video id="video-03" preload controls poster="/images/videos/testing.jpg" width="480" height="854">
<source src="/images/videos/testing.mp4" type="video/mp4">
<source src="/images/videos/testing.webm" type="video/webm">
<source src="/images/videos/testing.ogv" type="video/ogg">
</video>
I don't want autoplay turned on.
The only way I can get this to work in Chrome, is if autoplay is turned on, but still no controls to stop/start it show.
Any ideas why Chrome isn't showing the controls? Even if I right click on the video it has a tick next to "Show Controls". So Chrome thinks they're displaying, but there's nothing there.

Where are you stuck ?
look this below code it shows all controls, maybe you have another problem in your System.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

Related

Autoplay attribute of video element of HTML 5 working in Firefox but not in Chrome or Opera

I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video width="400" autoplay>
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>
<p><span>Video courtesy of </span>Big Buck Bunny</p>
</body>
</html>
Upon opening the file in Firefox everything is working as expected.
But, upon opening the file in Chrome or Opera a still image is coming and nothing is happening.
Why is it so?
I am using Ubuntu 18.04
A bit of a workaround. Adding the following after the closing /video tag could work.
<script>
document.getElementById('vid').play();
</script>
Does that work for you?
EDIT: After some extra digging I stumbled across this post https://stackoverflow.com/a/42414858/6524598. It seems to be the case that chrome only respects autoplaying of a video if the audio of it is muted. This would mean that the following would perhaps work for you as well:
<video width="400" autoplay muted >
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>

HTML5 Video working in all browsers except Safari

Trying to get a simple video to play on main page of website. I've included all three types of videos, and it works just fine on Chrome, Firefox, and Opera. But no Safari.
Website can be seen here:
outoftheboxtechnology.appspot.com
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="/assets/media/six-points.webm" type="video/webm">
<source src="/assets/media/six-points.mp4" type="video/mp4">
<source src="/assets/media/six-points.ogg" type="video/ogg">
</video>
You need Safari 4.0 to make the <video> tag to work. Perhaps you can put a notice on your website for your users. Once you meet that condition:
Make sure your src (in your case /assets/media/six-points.webm etc) is valid and the source exists.
Make sure you
open the Web Inspector in your Safari and check if the tag is
properly placed in the DOM.
Example:
<section>
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</section>
Safari 3.1+ supports it (Desktop).
Try this syntax
<video src="http://example.com/path/mymovie.mp4" controls></video>
Source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

Why won't chrome play .mp4 or .webm?

Chrome says "This plugin isn't supported" even though I have both video formats. Strangely I can play HTML5 video on other websites (with the same computer/browser). I looked at the source and they have mp4 first then webm.
I tested the site with chrome from another computer and it works fine. Chrome is at the latest version on both computers.
Here is my code:
<video preload="auto" autoplay loop>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
<video preload="auto" autoplay loop muted>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
Add the muted attribute to the <video> tag.
As you explain your issue...Please check with your 'Chrome extension' in setting, it might be possible that you have any extension which is creating problem in playing the video.
Please try to stop all extensions and then try to run the page again. Hope it will work.

How to view video in html5 tag?

I would like to ask question about how to play a video on my browser. When I try to load my video file to my browser it displays nothing. My teacher said that maybe it is because the browser is not supported by html5.
What is your idea guys. I am hoping for your positive response.
you can try this one:
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
</body>
please Refer This pages
SEE THE PAGE
If your teacher say your browser doesn't support html5.
Try double check in your browser eg. if you using chrome
Go to Menu --> Setting --> About and if it say need to be updated then click update.
Chrome support with html5 tag. Really weird if it not.
More info can check here https://html5test.com/results/desktop.html
For the coding part
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
It work and i already do a test here the display
Hav you tried to use it by
video tag,
<video id="samp" src="sampvideo.mov" controls> </video>
this should it work

Chrome No Longer Supports HTML5 Video?

I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls