Skip to main content
Participant
April 3, 2013
Question

How to embed HTML5 video player in web page

  • April 3, 2013
  • 1 reply
  • 2626 views

I have developed a video player using html, javascript and jquery. depending upon the browser type and mobile/non-mobile device, it creats the html5 video tags or redirect to a fall back flash player). I am using Adobe media server

this player works well on all the browsers.

videoplayer.html

<!DOCTYPE html>

    <html>

       <head>

</head>

<body>

<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">

          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />

          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />

          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.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':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />

                    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />

          </object>

                    </video>

</body>

    </html>

============================================

If I embed this video player in any of the aspx page using <EMBED></EMBED>, the redirection to flash player does not happen.(it works fine on chrome and safari but not on IE and firefox)

<EMBED height=360 width=250 src="http://localhost/videoplayer.html"></Embed>

    This topic has been closed for replies.

    1 reply

    Participant
    April 23, 2013

    I used <object> to make it work in IE and Firefox

    <object type="text/html" data="http://64.165.34.7:8134/videoplayer.html?size=1&playlist=2" style="width:460px; height:260px"></object>