music on web page

[jocar6562]

Used old script and then put in visibility Hidden which worked okay moved embed to css lay out but visibility not working not sure what put in.I have made it auto start. Html page

<audio controls autoplay>

<source src="2jc.mp3" type="audio/mpeg" class="c1">

Sorry your browser does not support our audio at 2jc.

</audio>

below the css

 

/* CSS layout 2jc */

/*<![CDATA[*/
embed.c1 {
width: 692px;
height:155px;
background-image:url('perfume-logo.jpg');
visibility:hidden;
outline-color:fuchsia;
background-position:center;
}
/*]]>*/
)

 

2 question tried to put picture in background which shows up on page load then overplayed with pic below

 

If any can help with the code to make invisible.

I am trying 2 things here and would also like help to see if I can put a picture in instead of the black background on the music control panel.

Thank you for your time

JohnC

Edited July 2, 2016 by jocar6562

[Ingolme]

Put the class on the <audio> element, not on the <source> element.

<audio controls autoplay class="c1">
  <source src="2jc.mp3" type="audio/mpeg">
  Sorry your browser does not support our audio  at 2jc.
</audio>

You're using the wrong selector. There's no <embed> element on the page. There's no need for CDATA tags, this isn't XML.

/* CSS layout 2jc */
.c1 {
    width: 692px;
    height:155px;
    background-image:url('perfume-logo.jpg');
    visibility:hidden;
    outline-color:fuchsia;
    background-position:center;
}

Setting visibility to hidden will make the whole thing invisible, even background image, you should put the visual styles on some other elements in the page.

[jocar6562]

Put the class on the <audio> element, not on the <source> element.

<audio controls autoplay class="c1">
  <source src="2jc.mp3" type="audio/mpeg">
  Sorry your browser does not support our audio  at 2jc.
</audio>

You're using the wrong selector. There's no <embed> element on the page. There's no need for CDATA tags, this isn't XML.

/* CSS layout 2jc */
.c1 {
    width: 692px;
    height:155px;
    background-image:url('perfume-logo.jpg');
    visibility:hidden;
    outline-color:fuchsia;
    background-position:center;
}

Setting visibility to hidden will make the whole thing invisible, even background image, you should put the visual styles on some other elements in the page.

Thank you for your help used the embed scrapped the css. Then put in sound to play but used this code which worked good on all platforms. There is a problem in which is puzzling me it is the sound control it does not work on screen. all the other icons work on the control bar To full screen, stop start movie

When you separate the 2 controls they work fine but I am trying to get the sound control to work with the video control just below is code I have written.

<video src="Fun.mp4" controls autoplay loop width="600" height="350">

</video>

</div>

<audio src="black.MP3" controls autoplay hidden loop ></audio>

When I remove the hidden it breaks into 2 controls which I do not want. Normally the control is hidden but I oversized the video to get a screen capture

Would be pleased for any help on this unable to find anything in the w3c school for putting the 2 controls together

JohnC

Edited July 3, 2016 by jocar6562

[jocar6562]

Hi

tried this code from w3schools

 

<video width="900" controls>

<source src="fun.mp4" type="video/mp4">

<source src="stones.ogg" type="ogg">

Your browser does not support HTML5 video.

</video>

sound worked when separated into separate controls but put together same results of no control no sound.

Back to the original script

<video src="Fun.mp4" controls autoplay loop width="600" height="350">

</video>

</div>

<audio src="stones.MP3" controls autoplay hidden loop ></audio>

 

I have no idea how to get the sound control to work

 

JohnC

[Ingolme]

I don't even know your requirements anymore. What are you trying to do?

 

You have a video file and an audio file.

Which controls do you want to show?

Do you want them both to play at the same time?

[jocar6562]

I don't even know your requirements anymore. What are you trying to do?

 

You have a video file and an audio file.

Which controls do you want to show?

Do you want them both to play at the same time?

 

 

Hi

just by asking questions and following suggestions I have found the answer. I put the film clip into editing software with the sound I wanted and when saving gave me a number of extensions I copuld use. MP4, OGV,WEBM, they all work in different platforms but not all. One extension that works in all android, apple,moz, msn all makes of smart phones with full controls is m4v. I have never heard of M4v until an hour ago. below is the code used which works in the way I wanted. On phones you get a arrow to press to start which works fine its not auto on mobile but is on android tablet but I think you can't have every thing

</video src= " blackpaint.mp4" controls autoplay loop width="600" height="350">

</video>

 

 

 

 

 

 

Thank every body for their time and help JohnC

 

Maybe an idea to show the extension in w3schools M4v

Edited July 4, 2016 by jocar6562

[jocar6562]

 

</video>