HTML - Video Player

I'm about to embark on something I realise will probably take a while to get right. Before I begin, it'd be good to pool opinions on the best approach. I've already done some preliminary research and to be honest at the moment it's all beyond my understanding!

The goal is to create a custom player of audio and video files with custom GUI, as part of a webpage. I don't want to use Quicktime because, AFAIK, it would prohibit a custom "look".

It may be necessary to create four separate players as the following situations need to be accommodated:

1) playing a single audio file
2) playing an "album" of audio files, in sequence
3) playing a single video file
4) playing an "album" of video files, in sequence

The player GUI would feature a "screen". When playing a video, the screen would show the video. When playing an audio file, there would be a still image associated with each song which would occupy the screen.

Then below the screen would be the usual apparatus for people to control playback: a trackbar, time counter, buttons for "play", "pause" and "stop". There would also be "next" and "previous" buttons for use when playing an album - they would be disabled when playing a single audio or video.

I have a few questions...

1. Apart from Flash, I don't want my visitors to need to install any software before they can use the player. I presume this depends solely on the media formats involved?

2. What video format would you recommend? What about FLV?

3. What audio format would you recommend? Ideally I'd like to use OGG but if that would introduce complications then I'll use something else.

4. There's always going to be a download button on the player so that the visitor can download the file being played. Now I've noticed on some sites that if a video is loading (before being played), and you attempt to directly download it, sometimes the download will "fail" at the point at which the loading was halted. So if the video has only loaded 40% and you start downloading it directly, the resulting file on your harddrive will only be 40% of what it should be. It's probably due to the streamed video being downloaded to an anonymous temp folder and being left in an incomplete state which the OS then thinks is a completed download. Can anything be done to stop this happening? Perhaps hide the "download" button until the file has finished loading?

Below is a mock-up of how I'd like the player to look, so you know what I'm going for. The purple background is supposed to resemble an HTML page.



I look forward to reading people's views.

Thanks for reading this long post,
Seymour.

Hey all,

Is it possible to shut down video screen automatically after displaying the video?

I mean, after video is over, is it possible to hide the video screen?

( I tried to use embed tag...
<embed src="myVideo" autostart="true" /> ??)

Thanks,
Doron

Hello, first post. HELLO!

my video widget playlist on my index is a different size on my index.php but the correct size throughout the rest of my site. Its quite annoying, can anyone shed any light on this issue?

thanks.

http://www.brewrecords.net

HTML Code:

<?php get_header(); ?>

<div id="content">

    <div id="homepagetop">

        <div class="textbanner">
            <?php $recent = new WP_Query("cat=" .ot_option('hp_top_cat'). "&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
            <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
            <?php endwhile; ?>
        </div>

        <div id="homeslider">
            <?php include(TEMPLATEPATH."/includes/slider.php");?>
        </div>

        <div class="homewidgets">

            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Top Right') ) : ?>
                <div class="widget">
                    <h4>Widget Area</h4>
                    <p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Homepage Top Right</strong>.</p>
                    <p><small>*This message will be overwritten after widgets have been added</small></p>
                </div>
            <?php endif; ?>

        </div>

    </div>

    <div id="homepage">

        <?php include(TEMPLATEPATH."/sidebar_left.php");?>

        <div class="homepagemid">

            <h3><?php echo cat_id_to_name(ot_option('hp_mid_cat')); ?></h3>

            <?php $recent = new WP_Query("cat=" .ot_option('hp_mid_cat'). "&showposts=" .ot_option('hp_mid_num') ); while($recent->have_posts()) : $recent->the_post();?>

                <div class="homepagecontent">

                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-thumbnail' ); ?></a>
                    <h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
                    <?php the_excerpt(); ?>

                </div>

            <?php endwhile; ?>

        </div>

        <?php include(TEMPLATEPATH."/sidebar_right.php");?>

    </div>

</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

Hey guys, Im having a problem with a flash MP3 player and wouldnt mind some advice if poss?

Ive made this site: http://www.psycleproductions.com. In the top of the page is a mp3player placed using an Iframe. I had hoped that because the mp3player was on a stand alone html page - when surfing through the site the Iframe wouldnt reset, and reset the mp3player swf file! Unfortunately this isnt the case... Now whenever you navigate round the site, the music playing starts all over again... very annoying!

Ive seen on other sites with MP3 players that they have done it the reverse way round. the MP3 player is embedded in the html, and the rest of the site called through Iframes. As i have already made the site (and its quite big really) i was hoping to find a way of placing the mp3 player 'on top' of everything else - so's not to reset!

If anyone can point me in the direction of a relatively easy way of gettin round the problem it would be much appreicated!!!

thanks peeps

Chilly

Hi everyone,
Im having trouble with a video that i have put on my website. I have converted it from dvd to divx.
Does anyone know of a good converter or if i can put in on to media player and play it off my website.
If you can do that will some one be able to post me the html code.

Hello viewers,

I've setup this website: http://duffyartwork.com.

You will notice the flash .mp3 at the top, which brings me to my question. How do I keep the player static and not refresh (i.e start the song over) when the user browses to different pages within the site?

It's been buggin' me for days, so any help would be brilliant.

I tried a few things, but it didn't work. So I'm looking for some simple help to put this video player in a container (or box) with a thin border around it. Any help is appreciated.

Code:

<center>
<div style="height:420px;overflow:hidden;">
      <iframe src="[var.base_url]/make_player.php?vid=[var.vid]&player_token=[var.player_token]" style="width:560px; height:420px; border:none;" marginheight="0" scrolling="no" name="flvplayer">
        <!--[onload;block=iframe;when [var.video_type] != 'embedded';comm]-->
      </iframe>
      <!--start of EmbedVideo Addon Player-->
      <span>
        <!--[var.videoembedder_code;htmlconv=no;comm]-->
        <!--[onload;block=span;when [var.video_type] == 'embedded';comm]-->

      </span>


      <!-- end of EmbedVideo Addon Player--><br/><br/>
      </center></div>

      <br/><br/>
      <div><center><a href="[var.base_url]"><font size="3" color="#000000" face="Arial"><b>Return to Home Page</b></font></a></center>

I'm looking for a small, simple, and customizable code for a music player. I want one where I can just change the code to point to my music.

Something like you see on kelliepickler.com

Anybody have a link?

Thanks in advance!

i have a drop down media player on my page. it is bigger than i want it to be until i click on a song, then it goes to the size i specified. how do i make it start out at that size? http://freewebs.com/kunaproxy/home.html. that is the page, and the media player is on the left. a little assistance would be great. thanx

Well im working on my portfolio so other people can see what i have been making through all my work...

I have 2 questions and i dont know what the things is called so i will try to explain it and then i hope U guys can help me...

1:
okey first of I would like to have a start site so when people enter my site they will get to that site and then U think " LOL ", but the front page need to move to index.php after lets say 10 sec, I just want the start page to have a small warning on it, and then its going to the next page automaticly....

2:
for this i want a music player that is stuck to the buttom bar so when someone scrolls down the music player is folloving....

I have been working with " HTML, FORM, CSS, SCRIPT, DB, and some others im still working on the PHP part but i can keep up if U give me the answer in PHP style...

Thanks for Ur time and help

by the way srry if this is the wrong forum to post, I have no idea where this questions belong...

Hi there.

I have an 800x600 flash movie, and I was wondering whether it was possible to center it vertically as well as horizontally? Thanks!

-Girvo

Hi
I tried embedding windows media player normally, to play videos on my site. It works on this computer (after i downloaded the rite codecs), but it doesent work on my other pc, nor mac.

Is there anything you guys know that i can get (maybe some sort of php thing, or some other code) to use windows media player, or something so that when i embedd it to the site, it works with no problmes. I tried some flash things, but there all so confusing, and im not good at flash, so i get lost in it. Thanks..

I would like to incorparate a media player into my website. I want it to be a separate popup window and show the list of mp3's available for people to listen to. I looked around but couldn't find anything that great and couldn't figure out how to put it in. Any suggestions?

I have embedded the media player on the website using this code:

Code:

<object type="application/x-shockwave-flash" 
data="test.swf" width="345" height="90"> 
<param name="movie" value="../flash/test.swf"> 
</object>

and it works fine except it doesn't seem to be able to load the sound. I have the sound in the same folder as the flash file and the sound runs fine when I test the .swf but not when I embed it into the website.

The php script I'm using for a video-sharing site, uses JWplayer as the default player.
JWplayer has different embed code to embed the player and allow video files to be played from a different source than the php script source. I want to replace or modify the script code for the Player with the JWplayer code (so it'll play videos from the other source) which shows the other source as http://videos.mywebsite.com/myvideo.flv.

How can I modify or integrate this script code with the code below it (the JWPlayer code)? Do I just need to change a few lines? Thanks for any guidance.

Script Code:
Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8" name="theMediaPlayer"
width="300" height="280"
id="theMediaPlayer">
              <param name=movie value="flvplayer.swf">
              <param name=quality value="high">
              <param name=bgcolor value="#FFFFFF">
              <param name=allowFullScreen value="false">
              <param name=swLiveConnect value="true">
              <param name=allowScriptAccess value="sameDomain">
              <param name="FlashVars" value="file=uploads/[var.video_play]&width=315&height=280&displaywidth=315&displayheight=260&overstretch=true&showfsbutton=false&image=uploads/thumbs/[var.video_thumb]&backcolor=0xFFFFFF">
              <embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="300" height="280" bgcolor="#FFFFFF"
name="theMediaPlayer"
src="flvplayer.swf"
flashvars="file=uploads/[var.video_play]&width=315&height=280&displaywidth=315&displayheight=260&overstretch=true&showfsbutton=false&image=uploads/thumbs/[var.video_thumb]&backcolor=0xFFFFFF"></embed>
            </object>

JWPlayer code:
Code:

script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
  swfobject.registerObject("player", "9.0.0", "expressInstall.swf");
  </script>
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
               name="player" width="328" height="200">
  <param name="movie" value="player.swf" />
  <param name="allowfullscreen" value="true" />
  <param name="flashvars" value="file=http://videos.mywebsite.com/myvideo.flv" />
  <object type="application/x-shockwave-flash" data="player.swf" width="328" height="200">
  <param name="movie" value="player.swf" />
  <param name="allowfullscreen" value="true" />
  <param name="flashvars" value="file=http://videos.mywebsite.com/myvideo.flv" />
  <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
  </object>