video file is not working properly in html media player

Question

I have some video files of format avi,mp4,flv. I am trying to run those in my html page. I used video tag. But by using video tag only mp4 file is running and all controls(start,pause,volume) are visible. Again I am trying to integrate by embed tag. But there videos are running but automatically and no controls like start,stop,pause,volume are not visible. My code is like: By video tag:

<video width="200" height="100" controls>
 <source src="http://localhost/hk_v2/superadmin/gallery/video/Fiza-2.avi">
</video>

(this is not running at all)

<video width="200" height="100" controls>
 <source src="http://localhost/hk_v2/superadmin/gallery/video/test.mp4">
</video>

(this is running properly with all controls)

By embed tag

<object id="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

standby="Loading Microsoft Windows® Media Player components..." type="application/x-oleobject" width="890" height="500">
<param name="fileName" value="http://localhost/hk_v2/superadmin/gallery/video/Fiza-2.avi">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="false">
<param name="Volume" value="-450">
<embed type="application/x-mplayer2" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://localhost/hk_v2/superadmin/gallery/video/Fiza-2.avi" 
name="MediaPlayer1" width=890 height=500 autostart=1 showcontrols=0 volume=-450>
</object>

(working but starting automatically and no controls over video).

Please help me how to resolve this issue. Thanks in advance.

Answer 1

try html plugin for it download the files for it click here
step 1 : extract it in a folder. for ex.name a folder "html5plug".
step 2 :include this in your html

<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>

Note : you should create your html in the "html5plug" folder or you have set the src yourself

step 3 : Add an HTML5 video tag to your page

click here check the demo on jsfiddle

Note : you must check your video links too.

Answer 2

first , you can try the classid like classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"

then we can control the video by javascript like below:

var wmp = $('object')[0];
wmp.controls.play()                   //play
wmp.controls.stop()                   //stop
wmp.controls.pause()                 //pause

Answer 3

You need to set the parameters to the correct values. With the 3rd option change these values:

<param name="autoStart" value="false">
<param name="showControls" value="true">