embedding video on webpage

[showman13]

Good Morning,

I'v been combing through the net including many links on this site, trying to get the necessary information to make a video play on my webpage. No Luck

I've tried multiple pieces of code to embed the video, but in each case I am faced with either a black screen or a note saying that a plugin is needed or No video with supported mime types found... But never a functioning playback of the video.

When I click on the link to install the necessary plug in, I get a message that it is an unknown plugin...

What I have is a .wmv

this is the webpage http://www.hctubs.com/syllent_vid.php

Here is the code that I currently have in place

<object width="300" height="250" type="video/x-ms-asf" url="video.wmv"
data="/downloads/video/Syllent.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="/downloads/video/Syllent.wmv">
<param name="filename" value="/downloads/video/Syllent.wmv">
<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="/downloads/video/Syllent.wmv" width="300"
height="250" autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

Any suggestions on making this work or on other alternatives that may be better would be greatly appreciated.

Do I need a different format video?

thanks in advance
Douglas

[showman13]

I actually got it to work on IE, but still not on FF...

found a new version of the object to embed...
But would still like some suggestions on better ways to do it.

<object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300" height="300" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="FileName" value="/downloads/video/Syllent.wmv.mp4">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="BufferingTime" value="2">
<param name="ShowStatusBar" value="true">
<param name="AutoSize" value="true">
<param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1">
<param name="TransparentatStart" value="1">
<param name="Loop" value="0">

<embed type="application/x-mplayer2" src="/downloads/video/Syllent.wmv.mp4" name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1" showcontrols="1" loop="0" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="300" height="300"></embed>
</object>

Hi,

I would use one of the JavaScript video players like FlowPlayer. You just include the js file, and I think you need jQuery too, but I can't actually remember for sure.

You can then use some simple js to show each video.

<a href="/extra/flowplayer/TheBalloon.mp4" id="player1"></a> // The link to your video.

<script type="text/javascript">flowplayer("player1", "/extra/flowplayer/flowplayer-3.2.5.swf",  {
clip: {
autoPlay: false,
autoBuffering: true
}
});

What I have is a .wmv

I wouldn't used .wmv files because it's not very popular extension that people used and it doesn't works well on browsers.

It's either mp4 or avi or mov or flv.

You can try and used this (this works well on any browsers):

http://mediaelementjs.com/

[showman13]

Thanks for your response...
as it turns out the video has a strange extension Syllent.wmv.mp4
so technically it is an mp4, but for some reason has the wmv in it as well (don't know what that is about)

The odd thing is that it works on IE, but when on FF, it shows a black screen where the video should be but no play button... But if you grab the progress button and drag it across, you can see the video portion of it with no sound...

Strangest thing I've seen.

Still working at it and trying to get it figured out, so if anyone has any suggestions I would appreciate them.

Thanks
Douglas

The odd thing is that it works on IE, but when on FF, it shows a black screen where the video should be but no play button... But if you grab the progress button and drag it across, you can see the video portion of it with no sound...

Try this:

<code>
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
</code>

-

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
 <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="myvideo.mp4" />
 <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="myvideo.webm" />
 <!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="myvideo.ogv" />
 <!-- Optional: Add subtitles for each language -->
<track kind="subtitles" src="subtitles.srt" srclang="en" />
 <!-- Optional: Add chapters -->
<track kind="chapters" src="chapters.srt" srclang="en" />
 <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvideo.mp4" />
 <!-- Image as a last resort -->
<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>

The code I post above are from the link I provided.

Since you want to design a player and also play videos try this:

<script>
 // JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
  // ... more code ...
player.pause();
player.setSrc('mynewfile.mp4');
player.play();
</script>

-

$('video').mediaelementplayer({
   // if the <video width> is not specified, this is the default
  defaultVideoWidth: 480,
   // if the <video height> is not specified, this is the default
  defaultVideoHeight: 270,
   // if set, overrides <video width>
  videoWidth: -1,
   // if set, overrides <video height>
  videoHeight: -1,
   // width of audio player
  audioWidth: 400,
   // height of audio player
  audioHeight: 30,
   // initial volume when the player starts
  startVolume: 0.8,
   // useful for <audio> player loops
  loop: false,
   // enables Flash and Silverlight to resize to content size
  enableAutosize: true,
   // the order of controls you want on the control bar (and other plugins below)
  features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
   // Hide controls when playing and mouse is not over the video
  alwaysShowControls: false,
   // force iPad's native controls
  iPadUseNativeControls: false,
   // force iPhone's native controls
  iPhoneUseNativeControls: false,
   // force Android's native controls
  AndroidUseNativeControls: false,
   // forces the hour marker (##:00:00)
  alwaysShowHours: false,
   // show framecount in timecode (##:00:00:00)
  showTimecodeFrameCount: false,
   // used when showTimecodeFrameCount is set to true
  framesPerSecond: 25,
   // turns keyboard support on and off for this instance
  enableKeyboard: true,
   // when this player starts, it will pause other players
  pauseOtherPlayers: true,
   // array of keyboard commands
  keyActions: []
});

[showman13]

Wow... now that is a response... LOL

Thank you. Looks like there was a lot more to it than I thought.

I just had my graphics guy create a .swf for me as well.

Out of all this, I should be good...

Thanks for all the info.