CODEWITHSUNDEEP
javascripthtmlvideo
Alexey
Alexey

Reputation: 3637

Playing a video in HTML

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?

Upvotes: 0

Views: 341

Answers (2)

rony36
rony36

Reputation: 3339

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.

Upvotes: 0

P1nGu1n
P1nGu1n

Reputation: 594

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

Upvotes: 2

Related Questions