|
HTML - Interactive Audio/video Player (with Custom Gui) In A Webpage
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. Similar TutorialsI'm not sure where the best place to post this question is, so I thought I'd start here and see what I get. I want to set up a video player like it is on this site: http://blueroomnyc.com/work/Q3hLj98J...story-refresh/ There are 3 links to different videos on the page, but they all open in the same place when activated. How is this accomplished? Is it javascript? I'd like to be able to do the same thing with an audio plugin as well. Thanks. Does anyone know how to position the <audio> player so it's stacked on top of a background image? If I make the player visible with <audio controls="controls">. I tried to treat it as an image by: Code: <style> <!-- this is the background image -->
#container {
display: block; margin-left: auto; margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/kohakuriver1.png");
background-position:center;
<!-- this is the audio player -->
#container audioplayer {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
#audio {top: 700px}
</style>
...
...
<body>
...
<div id="container">
<audio controls="controls">
<source src="music/hupochuanClip.mp3" id="audio" type="audio/mpeg"/>
<source src="music/hupochuanClip.ogg" id="audio" type="audio/ogg"/>
</audio>
</div>
</body>
It didn't work completely, it did move it to some odd place but not where I want it. Changing the height value won't have any effect (I tried changing it to like 7000px and it's still in the same place). Hey all, I've built a website for my music and I'm fairly new to all this so bear with me. Essentially, I have two flash-based music players on my site. One is a simple single-track player that auto-plays some background music for the site. The functionality is limited to the user starting/stopping the music and adjusting the volume. The other is an advanced music player featuring a playlist of preselected tracks and allows the user to start/stop music, rewind, fast forward, adjust volume and select tracks in the playlist. This player does not start automatically. My question is this: when someone visits the site, the single-track background music player will start. Is there code that would allow the advanced music player, should it be turned on (i.e. someone selects a track and plays it), to override and actually stop the play of the single-track? TIA! I'm wondering if anyone knows if this is possible and if so how: I want to create a web page that will play a random audio file from a folder on my server. I'd like the user to hear the audio file and then try and identify it and be told whether they are correct or not and what the correct answer is. Can this be done with html or do I need to use flash? Any help would be greatly appreciated! Thanks. Can i use javascript to control the file that playing by the real audio plug in, i mean i embeded the plug in, and i want to dynamically assign the files by using the drop down listbox. I had tried it , but although i successfully set the filename, but cant control the start value. Another question is whether window media play can play real audion file or not ?? Thanks for answering. mother of the bride discount wedding dresses mother of the groom dresses Can i use javascript to control the file that playing by the real audio plug in, i mean i embeded the plug in, and i want to dynamically assign the files by using the drop down listbox. I had tried it , but although i successfully set the filename, but cant control the start value. Another question is whether window media play can play real audion file or not ?? Thanks for answering. mother of the bride dress discount wedding dress mother of the groom dress Can i use javascript to control the file that playing by the real audio plug in, i mean i embeded the plug in, and i want to dynamically assign the files by using the drop down listbox. I had tried it , but although i successfully set the filename, but cant control the start value. Another question is whether window media play can play real audion file or not ?? Thanks for answering. mother of the bride dress discount wedding dresses mother of the groom dresses I'm having a really odd problem with the html audio player. It looks fine if I don't click the play button, but the moment I click the play button, it would disappear and reappear around 15-20 pixels lower. Here is my code for a simple audio player: HTML: Code: <div id="audioplayer">
<span class="eightonesmall" id="audiotext"> Background music control</span>
<audio controls="controls">
<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" />
</audio>
</div>
CSS: Code: body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow:hidden;
background-image:url(../pictures/drawings/backgrounds/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
}
#audiotext {
vertical-align:middle;
color:#CCCCCC;
}
#audioplayer {
position:fixed;
top:10px;
right:10px;
border:3px double #FFF;
height:30px;
}
The same problem occurs for an audio player that I've set to hidden, and will appear if I click an arrow and disappear if I click another arrow. It hides it and re-appears fine, just the player shifts down 15-20 pixels if I click play... HTML: Code: <div class="collapsearrow">
<img src="pictures/thumbnails/musicboxbuttons/collapsearrow.png" alt="collapsearrow"
onclick="document.getElementById('song1').style.visibility='visible';"/>Liangzhu
</div>
<div id="song1" style="visibility:hidden;">
<img src="pictures/thumbnails/musicboxbuttons/contractarrow.png" alt="contractarrow"
onclick="document.getElementById('song1').style.visibility='hidden';"/>
<audio id="musicboxplayer" controls="controls">
<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" />
</audio>
</div>
CSS: Code: #musicboxplayer {
position:relative;
width:86px;
height:25px;
}
.collapsearrow {
float:left;
}
#song1,#song2,#song3,#song4 {
width:150px;
float:left;
}
Does anyone know what's causing this? Thanks. Hello all. I am still new to HTML coding. I come from the dark side (flash) and am seeing the light anyway I am building a "flash alt" site and I am building it around the Cargocollective.com platform. and I DESPERATELY need a HTML or JAVA or some other iphone / ipad friendly music player for the site. I have been searching for weeks but all I keep finding are the same flash plugs that make the whole concept redundant. any help, guidance, or advice on this matter would be greatly appreciated.... thanks Ok, I figured out how to embed an audio clip into the web page that works pretty well across multiple browsers. The code looks like this:
Code: <embed width="200px" height="30px" loop="false" autostart="false" src="/media/GOAL.wav"></embed> And it looks like this on the web page: My question is, is it possible to add to that code so only a custom PNG file is visible until you click it and then the player begins? I don't even necessarily need the player to be visible. Can the audio simply play once when the PNG is clicked? What would that code look like? Thx. I would like to mount a nice looking video player to play videos on my multimedia page that is not Youtube Vimeo ect.. I am going to mount the player within an inline frame that is 600x375 and Ideally I would like it to fit that inline frame like a glove. What are some options for video players out there? I have a "web site on a CD" application and wish to have users be able to play audio and video clips. I currently have MP3 audio and AVI compressed video but can convert to other formats. The CD is created via MacImage so that both PC and Mac formats are correctly encoded. I have an HTML audio player and separate HTML video player (see below), both of which pass the W3C Validator as "4.01 Transitional" and play without problem on Windows/XP with IE6/7/8 and on Mac with Safari/QuickTime. The players do not work when used with Firefox or SeaMonkey on XP and do not work correctly with Firefox on Linux. I am seeking HTML code that will cater for all users on all platforms (PC, Mac and Linux) with as many browsers as possible (at least 1 on each platform). My audio player code is: <object type="audio/mpeg" width="360" height="50"> <param name="src" value="AudioTest.mp3"> <param name="Autostart" value="true"> <param name="Controller" value="true"> <param name="ShowStatusBar" value="true"> </object> My video player code is: <object type="video/avi" width="480" height="360"> <param name="url" value="VideoTest.avi"> <param name="src" value="VideoTest.avi"> <param name="autostart" value="true"> <param name="controller" value="true"> <param name="ShowControls" value="true"> <param name="ShowStatusBar" value="true"> <param name="ShowDisplay" value="false"> <param name="AutoRewind" value="false"> </object> Does anyone have any suggestions? I am doing a site for someone, Every once in a while they want to add audio/video to a certain page on their site.. Whats an easy way of accomplishing this? The pictures, they can upload whenever, but Audio and video is another story.. Whats the best method of letting a NON webdesigner upload audio and video to a site? Thanks a lot guys... I appreciate it... Hi guys! I`ve got a video on my web page, that i really wanna share on FB. But when I share it, it just comes up a lot of weird letters in the FB post, and dont a little movie player, surge as with a youtube video. And i guess all this have to do with embedding? Under, you can see how the html looks like atm. In it would be very helpful if you guys could help me to write it, so the movie shows up in my FB post, and you be played directly on Facebook. <title>newyorkhigh_3</title> <center> <!--url's used in the movie--> <!--text used in the movie--> <!-- saved from url=(0013)about:internet --> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1280" height="760" id = "MoyeaDemo"> <param name="movie" value="newyorkhigh_3.swf"> <param name="quality" value="high"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="True" /> <embed src="newyorkhigh_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1280" height="760" allowScriptAccess="sameDomain" allowFullScreen="True" name = "MoyeaDemo"> </embed> </object> </center> Hey im having some trouble with loading jw player on my site it will load and play on safari but when I go to it in internet explorer it doesnt seem to load, can someone telling me whats going on? this is the scripting im using <HEAD> <script type="text/javascript" src="/jwplayer/jwplayer.js"></script> and in the <body> <P><video src="Video/DSC 0938.flv" height="270" id="container" poster="images/movie.jpg" width="480"> </video> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf" }); </script></P> Thanks Hi I have a Flash video player that brings up IE's yellow warning bar, and whne you click to allow it, it won't play even after you say 'yes, play it'. It only happens in IE7 It's at http://www.directhometherapy.com.au Any ideas how to allow the player? Thanks for taking a look. Shaun Hey guys! I've just realized my first site html5 and all it was ok about indeed the on-line publishing on my server. Indeed every test made on the local disk were good without Firefox does not read the audio and video files. It works with Google Chrome and Safari but not Firefox. I am anxious to specify that I'm under Mac Os X and that I converted well files in format OGG and that I am rather a graphic designer who try write some code. I try to find the solution for several days but unsuccessfully. Can anybody help me please? Here is the fragment of the code: HTML Code: <!-- Track 01 --> <div> <h3>Fall</h3> <div class="mp_options"> <span class="mp_play">Play</span> <span class="mp_addpl">Add to playlist</span> </div> <div class="mp_song_info" style="display:none;"> <span class="mp_song_title">Fall</span> <span class="mp_mp3">music/album1/Red_Fish_Fall.mp3</span> <span class="mp_ogg">music/album1/Red_Fish_Fall.ogg</span> </div> </div> <!-- Track 02 --> Can you suggest a video media player that supports rtmp protocol and has no branding? Maybe an open source general license? Simply to play flv files on a web page. Thanks. (not JWPlayer or Flowplayer) I would like to display and load a quicktime player version 7.0.4 on a webpage but I can't find any sample html coding to do so. Can anyone help me? crowee I volunteer to maintain a page for a non-profit: http://www.girlsincsoaz.org This was a request "We have a fund raiser that all the Board will be working on. We'll be mailing to local individuals and my intent for a private page was a place that any Board member could go to log those names mailed to. I didn't want duplication of mailings and thought that each person could input who they sent to." I have created the private page, my hosting account--one world hosting-but they don't seem to have any tools to do the active page Any ideas TIA |
|||||||