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>
How would a browsers actually fallback with each of those during video unavailability, slow loading, OS restrictions or no support for HTML5 tag?
<video src="/video.mp4" poster="/fallback-image.png" />
<video src="/video.mp4">
<img src="/fallback-image.png" />
</video>
<video src="/video.mp4" poster="/fallback-image.png">
<img src="/fallback-image.png" />
</video>
What is the cross-browser preferred method? And does it make sense to use both?
The poster is not a fallback image. It an image to show prior to video playback.
Adding an img element as content of the video element only works as fallback for the case where the browser is very old and doesn't know what a <video> element is. Clearly, if the browser doesn't know what a <video> element is, it's not going to know what the poster attribute does.
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.
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.
I want to add a video into my html code and it should be accessible at least from IE ,firfox and chrome browsers.
The extension of the video is .vob
I have used this code
<object data="../Video/VTS_01_1.vob" height="200" width="200"></object>
But I can't see nothing on the screen juste a square with 200 height and 200 width
Use the <video> element
Use a file format supported by browsers. VOB is not such a format. MP4 and WebM are good choices for different browsers, you should use both
Consider using a library that provides Flash et al fallbacks for old browsers. Examples include video.js and video for everybody
Sample Code:
<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
<div class="fallback">
<p>................</p>
</div>
</video>
wrapped up the same old <object> and <embed> tags with the new tag .
More info about video tag