I tried to add default WordPress audio player in the normal HTML table. i want to display all the three below div in same line even in mobile devices. Any possible to do like this or any option to show only play button in audio player or using html5 audio player.
<table><tbody><tr>
<td><div>My audio</div></td>
<td><div>[audio src="http://cldup.com/uMFLx60B4V9/9j8WQE.mp3"]</div></td>
<td>Date</td>
</tr></tbody></table>
Replace your DIV
<div>[audio src="http://www.website.com/123.mp3"]</div>
with this HTML5 tag
<audio controls>
<source src="http://www.website.com/your_file.mp3" type="audio/mpeg">
</audio>
Related
I have used the HTML AUDIO tag with CONTROLS to display an audio track.
<audio controls controlsList="nodownload">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Using CSS audio::-webkit-media-controls- I figured that many functions can be modified.
However, I couldn't manage to figure out how to disable / hide those 3 dots on the player.
PS: This helped a lot in disabling / styling the controls with CSS.
However, it was an answer from many years ago, so it didn't include playback speed options.
Is it possible to style html5 audio tag?
Add this controlsList: noplaybackrate
<audio id="myaudio" controls controlsList="nodownload noplaybackrate">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I would like to style the audio panel to show the play button only and not the volume control and time. The code I'm using is this:
<audio class="play_button" controls="" preload="none" style="width:175px" class="kskin" data-durationhint="1.55" data-startoffset="0"> <source src="audio/giraalaizquierda.ogg" type="audio/ogg; codecs="vorbis"" data-title="Original Ogg file (100 kbps)" data-shorttitle="Ogg source" data-width="0" data-height="0" data-bandwidth="100377"></audio>
enter image description here
You can't style the native controls.
You can only omit the controls attribute, then build your own UI (e.g. using a <button>) which controls the audio element with JavaScript.
I have a simple HTML5 audio player that I would like to make responsive in Bootstrap.
<div class="col-sm-4 col-sm-offset-4">
<audio controls style="width: 600px;">
<source src="sample.mp3">
</audio>
</div>
Is there a way to make the div containing this audio player responsive no matter what content is in it or at least a class or something to make the audio player responsive? Hoping to not have to use an external library if possible.
Thanks!
I suggest to use width:100% and max-width:600px.
When you make the window smaller in a desktop browser you will not see it the same way as on a real mobile device, but the audio element on mobile devices (i.e. iOS, Android) is definitely going to be smaller anyways - you don't have much influence on its apprearance. Together with those settings it should adapt to just about any situation properly.
(You just might want to add a second source tag with the audio in ogg format and also add the file format in the source tag/s, see https://www.w3schools.com/tags/tag_audio.asp)
Try:
<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3">
<audio controls class="embed-responsive-item">
<source src="sample.mp3">
</audio>
</div>
Ref: http://getbootstrap.com/components/#responsive-embed
I am new to wordpress,I am using interface theme (http://themehorse.com/preview/interface/) ,I have downloaded a youtube video in mp4 format and uploaded it through Admin.Now i want to show this video in Widget Tab Business Page Section.
Goto your widgets and drag the text widget to your desired sidebar. Then inside your widget type this code in
<video width="320" height="240" controls>
<source src="http://yoursite.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Replace the source link to yours and adjust the dimensions.
i have a task to Upload video and play in different browser. i have tried playing a .Mp4 video on different browser
i have tried implementing the iframe like
<iframe id="frame1" runat="server" visible="false" style="height: 222px; width: 482px;">
</iframe>
and tried implementing it src at runtime as:
frame1.Visible = true;
frame1.Attributes.Add("src", objLessionsInfo.VideoPath.ToString());
It works at chrome. but not in firefox and IE
I also tried implemeting the video tag of HTML5 as
<video controls="controls" tabindex="5" class="Video">
<source src="Videos/2.webm" type="video/webm" >
<source src="Videos/2.ogv" type="video/ogv">
<source src="Videos/2.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
the same works at Chrome but not in Firefox and IE as .mp4 works on chrome but firefox doesn't support. i have tried with .webm format it plays at firefox.
i am confuse with the concept of how to make a video support to a different browser or how to structure this task.
whether should i check browser and play a video for that particular browser ( in this case i have to upload a video in different browser)
or is there any universal plugin that can play a video in all browser
need help on it. Thanks for any assistance.
Try a HTML5 video plug-in, like
Mediaelementjs.com
videojs.com
those plug-ins are automatically taken care of your browser compatibilities. ".mp4" is the good enough. If you don't have other video extentions(.ogg or .webm), plug-ins will automatically convert it to FLASH object.