HTML 5 Video not working on Mozilla - html

For some reason, my HTML 5 element is not working for me on Mozilla Firefox.
The control buttons of the video do show up, but when I press play nothing happens.
It works perfectly on chrome though. Here is my code:
<video width="100%" controls="controls">
<source src= "video/myvideo.mp4" type="video/mp4">
<source src="video/myvideo.webmhd.webm" type="video/webm">
</video>
Can you help me find out the reason why it is not working please?
EDIT: My problem is that if I press the play button the video won't play... but if I press the time bar, the video plays. How can I make it start by pressing the play button?

The controls attribute for the <video> tag is a boolean. Just use
<video width="100%" controls>
or
<video width="100%" controls="true">

mozilla don't support mp4
you can see it here
https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements

Convert video to .ogg and include that as well.

Chances are video format is not supported by mozilla. Just renaming the file as that video type might not be right.
Check the video format supported by mozilla -
a link!

Related

Impossible to play my video on Safari browser

I looking for a way to play my video on Safari but I don't understand my video doesn't start ?
However, my video works on google chrome or edge.
Here is an idea of my code HTML
<video width="640" height="360" controls="true" autoplay loop muted playsinline>
<source src="/Perso/WebSite.nsf/vLUpage/VIDEOS/$File/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Perhaps that, I have to use of the CSS ?
Thank you for your help.
Try disabling cross-site tracking prevention on you IOS device under Safari > Preferences > Privacy.
read this https://support.apple.com/en-gb/guide/safari/sfri40732/mac
You can't play automatically a video on safari. The user has to engage an event and in this event you can play your video.

<audio> tag for mp3 doesn't really work on Chrome

First of all here is the website I'm currently coding :
http://www.clairereviens.com/
On each button, there is one tag for one mp3 sample. All the mp3 are playing perfectly with Safari, but with Chrome only a few buttons are working.
I tested with type audio/mp3 and audio/mpeg, but it doesn't change.
Thanks guys
Its too late but this might help anyone in future.Both audio of mp3 quality(128 and 320 Kbps) and video of mp4(in iFrame) are working fine in the google chrome version 55.0.2883.87.
<audio controls="controls" src="mydriveaddress\test.mp3" autoplay>
</audio>
<iframe src="mydriveaddress\test2.mp4" height="300" width="300" allowfullscreen=""></iframe>
Some of the buttons are not working because you are specifying the file type wrong. All the audio files are mp3 but you're specifying some of them as mpeg.
You need to change this:
<source src="sons/xxx.mp3" type="audio/mpeg">
to this:
<source src="sons/xxx.mp3" type="audio/mp3">
For all of them.
I had the same problem with Google Chrome. It's more of like a version problem of chrome. To fix that re-encode the MP3 files to a lower bitrate using Audacity or other Media Converters.
For more info: https://stackoverflow.com/a/32719143/8009667

HTML video tag not working

I am trying to add a video tag to get a video player with my video like this
The video shows up fine sometimes as shown above, but most of the time it shows up weird and not functional as shown below
No matter if I click play or not, it just does not work.
Here is my code
<div class="detailRight">
<video id="video1" width="515" height="300" preload controls>
<source src="../files/MyVid1080.mp4" type="video/mp4">
</video>
</div>
I'm not sure why it works sometimes and sometimes it does not. How do I get past this bug?
EDIT1
Above is in Chrome, in Safari it is working fine, in Firefox it is giving me
in order to support all browsers i would recommend using .ogv .webm and .mp4 formats this should solve your problems their are a couple of online sites that will convert your video for free

HTML embed autoplay="false", but still plays automatically

On the front page of this website, there is a sticky post titled "National Radio Advertising Campaign ForACURE" which contains the following HTML:
<embed type="audio/x-wav" src="http://www.foracure.org.au/wp-content/uploads/FOR-A-CURE-RADIO-Daniel-45sec.mp3" autoplay="false" height="20" width="200" autostart="false">
However, when I load this website in Chrome v31.0.1650.57 m, the audio plays automatically, even though both autoplay and autostart are set to false.
Is there a better cross browser method of embedding this audio?
Chrome doesn't seem to understand true and false.
Use autostart="1" and autostart="0" instead.
Source: (Google Groups: https://productforums.google.com/forum/#!topic/chrome/LkA8FoBoleU)
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
Remove autoplay
if you want to disable auto playing video.
Just set using JS as follows:
<script>
var vid = document.getElementById("myVideo");
vid.autoplay = false;
vid.load();
</script>
Set true to turn on autoplay. Set false to turn off autoplay.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_autoplay
None of the video settings posted above worked in modern browsers I tested (like Firefox) using the embed or object elements in HTML5. For video or audio elements they did stop autoplay. For embed and object they did not.
I tested this using the embed and object elements using several different media types as well as HTML attributes (like autostart and autoplay). These videos always played regardless of any combination of settings in several browsers. Again, this was not an issue using the newer HTML5 video or audio elements, just when using embed and object.
It turns out the new browser settings for video "autoplay" have changed. Firefox will now ignore the autoplay attributes on these tags and play videos anyway unless you explicitly set to "block audio and video" autoplay in your browser settings.
To do this in Firefox I have posted the settings below:
Open up your Firefox Browser, click the menu button, and select "Options"
Select the "Privacy & Security" panel and scroll down to the "Permissions" section
Find "Autoplay" and click the "Settings" button. In the dropdown change it to block audio and video. The default is just audio.
Your videos will NOT autoplay now when displaying videos in web pages using object or embed elements.
Just change the mime type to: type="audio/mpeg", this way chrome will honor the autostart="false" parameter.
I had assumed that autoplay="false" applied to all other browsers, besides Chrome, so I added
autoplay="false" autostart="0"
to each video tag. With six videos on the page it was a tower of bable (didn't work).
The solution is to remove autoplay entirely and just add
autostart="0"
to each video tag. This worked for Chrome, Firefox, and MS Edge.
Apparently the lack of an autoplay attribute is sufficient for the other browsers.
This will prevent browser from auto playing audio.
HTML
<audio type="audio/wav" id="audio" autoplay="false" autostart="false"></audio>
jQuery
$('#audio').attr("src","path_to_audio.wav");
$('#audio').play();
<embed ... autostart="0">
Replace false with 0
I removed "autoplay" and "autostart", it worked
This is my code:
<video width="427" height="240" controls >
<source src="/abc.mp4" type="video/mp4">
</video>
add attribute controls to video tag. It worked on my code
the below codes helped me with the same problem.
Let me know if it helped.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="YOUR AUDIO FILE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The problem is your plugin. To solve this is to only enter this address:
chrome://flags/#enable-NPAPI
Click activate NPAPI, and finally restart at the bottom of the page.

<video> element displays only control bar

I have a H.264 video I want to show it on Chrome using HTML5 but using this video tag I only see a control bar.
<video width="320" height="240" controls="controls">
<source src="myvideo.264" type="video/264" />
Your browser does not support the video tag.
</video>
If someone has experience here, please help me to find a solution.
Try changing your file extension to 'mp4' and your type attribute to 'video/mp4'.
For extra credit, you may want to have a Flash fallback for Firefox, which does not play H.264/MP4 video (yet). You can use something like jPlayer or Video.js to handle this for you.