Yendif Player

Hi,

I'm using Yendif Videoshare. But sometimes between the movies I need to add an mp3/ogg file.
I currently select 'Third Party' in the component "Yendif Video Share"
Could you help me out with the right code or correct my attempts?

What I want is:
1. I'm trying to put in a static background picture? But it's not always working in all browsers.
2. The controlbar is now on the bottom. Can that be placed in the center/middle (or increase in size)?
3. Any possibility to have a timed control. Let the soundfile start at a certain moment?

Current use:
<div class="yendifplayer">
<div style="background-image: url(hxxp://.....image.png);" class="yendifplayer">
<audio autoplay preload>
<source type="audio/mpeg" src="hxxps://....mp3">
<source type="audio/ogg" src="hxxps://.....ogg">
</audio>

Not always showing the picture (browser dependent)

Second try after some fiddling:
<div class="yendifplayer">
<div style="background-image: url(hxxp://.....png);" class="yendifplayer">
<audio id="audio2"
preload="auto"
src="hxxp://.....ogg" >

<p>Your browser does not support the audio element</p>
</audio>

<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
this.currentTime = 22;
this.play();
});
</script>

Background image doesn't work. The audio file.....euh plays double now. it plays the soundtrack from the beginning AND from the time set.

Kindly try,
<div style="background-image: url(hxxp://.....image.png);">
<div class="yendifplayer">
<audio autoplay preload>
<source type="audio/mpeg" src="hxxps://....mp3">
<source type="audio/ogg" src="hxxps://.....ogg">
</audio>
</div>
</div>

Note : Sorry, the current version doesn't have option to start the playback from certain moment.

Thanks....
Stupid to forgot to close with </div>


Your help was just what I needed to get to a solution.

I fiddled around.... just a temporary solution...
Controls is to set a control bar. As this workaround..doesn't show the yendif controlbar
height is variable to the windows size used. It is used to move the audio controlbar to the bottom

...Now bring back the Yendif audio controlbar...


______________________________________________________________________________________________________________________


<div class="audio">
<div style="background-image: url(hxxp://xxxx.png);" >
<audio preload id="audio2" style="width:100%;height: 475px;" controls="controls"
src="hxxps://xxxx.mp3" >
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
this.currentTime = 43;
this.play();
});
</script>
</div>
</div>

To bring back Yendif Player control-bar you must use "yendifplayer" class to the parent element that's wrapping the audio element. Kindly refer yendifplayer.com/demo/playing-audio.html