<video> element displays only control bar - google-chrome

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.

Related

mp3 file is not playing automatically when the page loads

I want an mp3 file to play automatically when the page loads, but that doesn't happen.. the file only plays when I press the play button.. how do I get it to play automatically?
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
It works with another browser, but is there any way to make autoplay work in Chrome?
Have you tried other browsers?
This should help
https://www.w3schools.com/tags/att_audio_autoplay.asp
Not all browsers support this feature because the code you have written is correct. However, there is another javascript trick that can be used I will suggest you try to use that.
Autoplay mode should be added to the opening tag of your code, this is widely supported by Chrome and FF
You only need to change that mpeg to mp3. Just like this:
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mp3">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
it will work
There are two things that could be wrong.
1) your browser doesn’t support it
2) your file format “mpeg” should be “mp3”

HTML5 video webOS

I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>

Safari won't play HTML5 video

I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.

Embedding Video in O365 Site

I have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!

How to implement video that support in ie8

Hi friends i used video tag in html, ie8 its not working. how to implement video in ie8.
<video width="300" height="200" controls>
<source src="pencuin.mp4" type="video/mp4">
</video>
Can any one suggest me solution, thanks.
IE8 does not support the video tag. In this case, IE8 displays instead the contents of the video tag, which is hidden in browsers which support the tag.
To support IE8, find a video player using Flash and place the <object> tags inside the <video> and follow the instructions for that video player to choose the right video for it to play. Newer browsers will use the video tag and will not require Flash, but users of older browsers must use Flash.
Try SWFObject: Javascript Flash Player.
Try this example: http://code.tutsplus.com/articles/how-to-play-video-using-an-open-source-player--net-4144