I need to play a video inside an HTML file and then inside a Joomla article (first want to try in a single HTML page).
I am using this code:
<video width="500" height="250" controls autoplay>
<source src="videos/video.wmv" type="video/ogg">
<source src="videos/video.wmv" type="video/mp4">
<object data="videos/video.wmv" width="500" height="250">
<embed width="500" height="250" src="videos/video.wmv"> </object>
</video>
I tried downloading a video from Youtube, and it works fine on Chrome and FF, but not on Opera.
However, the main issue - I have an avi (230MB) that I need to play. How could I do it? Convert it to an .wmv/.mp4? Or can I play it as an avi without external plug ins?
I tried renaming it from .avi to .wmv, tried online converters but it still doesn't work.
Could the problem be the size? The format?
I usually have four versions of the same video for cross-browser
compatibly:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked
well for me cross-browser. Another thing to note is that for mobile, a
higher-optimised .mp4 video is more likely to work (I've had issues
with this in the past).
Source: Making video tag play in all browsers
did you tried Video.js? It's open-source and cool.
In the <head>:
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 60% }
</style>
In the <body>:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
Here you could find more.
Related
I am using html video player. I want to show control bar always ..currently it shows on hover but i want it should be display always not only on hover.
Include the controls attribute to the video player
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For me adding the control tag always shows the controls in Chrome. Are you using other browser like Safari?
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I have just created my new web page and have set up hosting for it. The web page contains a video which should play. However the video just constantly loads and doesn't do anything.
Is this because the video is having to download from the web server?
Here is the code:
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="fire.mp4" type="video/mp4" />
</video>
The code works locally with no issues.
Thanks in advance!
If you are getting video in the source directory, you maybe wanna use:
html
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="/fire.mp4" type="video/mp4" />
</video>
Yes I added a backslash before fire.mp4 in the source of the source tag, as / is used to get content from root directory.
This of course only works if you have "fire.mp4" in the same directory as your html file.
If it is in a different directory just do this maybe:
html
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="/path/to/dir/fire.mp4" type="video/mp4" />
</video>
These are my code snippets which I've tried but I just get an error message that I need a Plugin
<embed src="eria.mp4" height="50%" width="100%" controls>
You don't need any plugin in HTML5. But the syntax is a bit different:
<video width="100%" height="50%" controls>
<source src="eria.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The <embed> tag defines a container for an external application or interactive content (a plug-in).Simple words it requires a plugin to run external application which is missing from your browser.
Use HTML5 video tag instead
<video height="50%" width="100%" controls>
<source src="eria.mp4" type="video/mp4">
<source src="eria.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I see this error "No compatible source was found for this video." over the video in safari. I am using video.js for displaying videos. And here is html for one of my videos which isn't working on safari:
<video class="video-js vjs-default-skin" controls="true" preload="yes" width="640" height="380" poster="poster.jpg" data-setup="{}" src="video.mp4">
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>