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.
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.
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
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">
Related
I'm using TinyMCE to embed an FLV video. Using the default media tool with "Flash" selected in the dropdown for "media type", this code is generated:
<object width="320" height="240"
data="/path/to/tiny_mce/plugins/media/moxieplayer.swf"
type="application/x-shockwave-flash">
<param name="src" value="/path/to/tiny_mce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/path/to/video.flv&poster=/" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
</object>
It looks like this after saving; white background, invisible until I hover the mouse, then the controls appear:
The video plays fine. I've tried adding an <img> tag inside the <object>, and tried adding the path to an image in the &poster= parameter, but it doesn't appear. I can't use YouTube. It doesn't have to be with TinyMCE, I can hand edit the HTML.
How can I add a thumbnail? (jsFiddle)
hope you have good day-
in the flash codes, you cans set wmode="transparent" and the flahs wite backround willn't be displayed and you can place picture behing where the movies is and set z-index:-1 so when start playing and video cover pucture here i make example for you to see http://jsfiddle.net/YED3A/4/ is ther
How to Play Video (MP4 format) in IE , Firefox, Chrome.
You can also use a windows media player object tag
<object width="100%" height="100%"
type="video/x-ms-asf" url="Video/Home.mp4" data="Video/Home.mp4"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="Video/Home.mp4">
<param name="filename" value="Video/Home.mp4">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="Video/Home.mp4" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
Also if the browser doesn't have the plugin to play it, it will propmt you to download one specific to your browser. But there is no other way to create a cross browser player without plug-ins(as far as my knowledge goes)
use <video> tag to embed the video
http://www.w3schools.com/html/html_videos.asp
While designing my site i am attempting to use the HTML5 video tag. The video works using HTML5 in most browsers, and if it doesn't then it uses the flash fallback that i have included in the code. The main code is as follows:
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
Now the only browser that this still does not work on is IE9. IE9 sees the HTML5 video command and loads the player for a split second but never loads the video. So what i tried to do was to set it up as follows:
<!--[if IE]>
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
<![endif]-->
<![if !IE]>
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
<![endif]>
However with this code loaded all the other browsers work again with the exception of IE9. It is not picking up the if IE tag and it is just going straight to the HTML 5 page which doesn't load.
Really what i am trying to do is say if it is ANY version of IE to use the flash based player and if it is anything else use the HTML5 with the flash fallback. If anyone could give some inside on how to make this work or a more elegant solution it would be really appreciated.
Thank you
Try Something like:
<!--[if lt IE 10]>
// here
<![endif]-->
You should use something like modernizr to check for your browsers features (instead of browser sniffing and making assumptions - they might be wrong or change). Depending on the client's capabilities you can then start serving the right content.
Another approach (if it's plain video only and you don't need any other feature detections) would be using something like shown at Video for Everybody.
This is the code they are proposing to embed video for everybody:
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: "MP4"
Open Format: "Ogg"
</p>
I have a site where a jQuery dialog is used to show videos in a modal frame.
I would like to be able to rest the close button so that it partially covers the embedded QuickTime object, much like the modal frame in this picture:
http://ajaxdump.com/wp-content/uploads/2009/08/MooTools_SqueezeBox-Expandable-Lightbox-308x400.gif
QT always renders above any other element.
I've looked around for solutions, but I've had little luck with it. Is this even possible? Or should I just give up hope now?
You need to adjust the wmode parameter of the Quicktime object to "transparent" in order for it to display beneath other content.
You'd want to set it up like this in your HTML:
<object width="500" height="250" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"
id="video_object" style="behavior:url(#qt_event_source);" class="plugin" >
<param name="src" value="whatever.png">
<param name="autoplay" value="false">
<param name="postdomevents" value="true">
<param name="wmode" value="transparent">
<param name="controller" value="false">
<param name="scale" value="tofit">
<embed id="video_embed" class="plugin"
type="video/quicktime" src="whatever.png"
wmode="transparent" postdomevents="true" controller="false" scale="tofit" >
</embed>
</object>
Have a look at this demo.
Video plays fine, but the controls (play, stop, rewind etc.) don't appear, despite setting the "controller" parameter to "true".
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260">
<param name="src" value="myvid.mov" />
<param name="controller" value="true" />
<object type="video/quicktime" data="myvid.mov" width="320" height="260" class="mov">
<param name="controller" value="true" />
</object>
</object>
Works fine when I refer to this video:
http://realdev1.realise.com/rossa/rendertest/quicktime.html
Do the controls need to be enabled when encoding the video perhaps?
The height of the movie + 16px should do the trick.