Embed Video and Audio onto Website

[huffman]

I am looking for some javascript that will load and play music or video on my websites.

I used to use the following javascripts but these NO longer work:

<embed src="/help/mediaplayer.swf?file=video.wmv" width"854" height="480" allowfallowfullscreen="true" />
and
<embed height="50" width="100" src="/myaudiofiles/example.mp3">

Why these NO longer work I can not image. I would appreciate any help I can get.

Thanks very much

[mlegg]

this will work for just the audio only; you need to find a play and a pause .png, if you fiind a jpeg then change that in the code

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>

<audio controls loop>
<source src="audio/waves.ogg" type="audio/ogg">
<source src="audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = false; ctrl.src = 'images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? 'images/pause.png' : 'images/play.png';
}, false);
})();
</script>

this is it live on one of my websites (http://hamptonsunrise.com/)
this is what I used on that website for the icons
5767 5768

[Beverleyh]

That's a very old method. You don't *need* JavaScript anymore - HTML5 comes with native video and audio elements.

Mozilla docs info https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

My contributions
- Audio: http://fofwebdesign.co.uk/freebies-for-websites/demos-and-snippets.php?sort=aud
- Video: http://fofwebdesign.co.uk/freebies-for-websites/demos-and-snippets.php?sort=vid

[huffman]

I guess I am NOT as smart as I thought I was.

mlegg I understand your code is for audio only and I have NOT tried it yet but I will

Beverleyh I have tried the audio script and for life of me I can NOT get it to work.

A little more help might help. Thank you

[Beverleyh]

Which audio script have you tried? There are 4 in the filtered results I linked to.

Unfortunately we can't troubleshoot something we can't see so please post a link to your page.

[huffman]

I feel like a Bumb Butt. I am using Dreamweaver 8 to create my webpages. Dreamweaver has a built-in media function that embeds either audio or video with a minimum of effort. It just took me a while it out.

I do appreciate the responses.

[huffman]

Grrrrrrrrrrrrr I tried a video and in Dreamweaver, it tested fine but when uploaded to my service it does NOT work. Now I am back to ground zero

[Beverleyh]

I tried a video and in Dreamweaver, it tested finehmm, now does this mean that you stayed within the Dreamweaver environment? As in, does it give you a live preview mode from within the web builder software? I can't really help you there, and I'm not sure that anyone else here will be able to either as we tend not to use web building software. How about when you save the files and test locally by opening the page in a web browser (not in Dreamweaver)?

If it works locally and not online, check that all the assets/resources are uploaded and that paths are correct. Also check file names, extensions and paths for case (Windows environments are not case-sensitive, whereas UNIX environments are). Paths may cause issues to if they're saved like they're meant for a local computer; C:\ type paths (i.e. absolute from your computer's C drive) do not work online, so check those. Failing that we'd need to see a link to the page in order to offer further suggestions.