I'm using simplest html5 audio element like this
<audio controls="controls" preload="auto">
<source src="Happy_Boy_End_Theme.ogg" type="audio/ogg" />
<source src="podcasts/Happy_Boy_End_Theme.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
this result:
I want to
1) change the height of the control - tried these options nothing worked:
<audio controls="controls" preload="auto" height="350px">
<audio controls="controls" preload="auto" style="height: 350px;">
<audio controls="controls" preload="auto" style="height: 50%;">
2) Want to change its built in blue color sliders to red - without "building" my own player.
Sorry, in WinJS is an HTML5 control and currently there is no way to style by using CSS. Instead if you need a custom styled audio player, you could implement it by writing JavaScript code, or use some 3rd party library.
Some styling can be achieved with javascript. See https://serversideup.net/style-the-html-5-audio-element/ for details
Related
I've been struggeling with this one for a long time and haven't found a solution yet.
I have a preloader on my friend's website which I built (he insist of keeping it)
the preloader is applied with the video tag like so:
<video muted autoplay loop playsinline preload frameborder="0" width="100" height="100">
<source src="/media/preloader.webm#t=0.25" type="video/webm">
<source src="/media/preloader.mp4#t=0.25" type="video/mp4">
<source src="/media/preloader.mov#t=0.25" type="video/quicktime">
</video>
on all browser that's working great, but on firefox mobile before video is playing I see this play button(for half a second):
https://i.stack.imgur.com/YRpal.png
What can I do to remove this annoying button for good?
I have an interesting issue that I can not seem to figure out. I am using a company to create a website for me and in their templates, they will allow me access to CSS but not to the HTML or Jquery. I need to figure out a way to change the muted too unmuted or be able to remove it.
<video style="height:100%;" loop="" muted="" autoplay="" poster="https://removed from code" playsinline="">
</video>
I can only use css to fix this, any ideas?
<video id="myVideo" src="video.mp4" controls replay autoplay></video>
I have a page where I need to display videos with different extensions.
Example: .mp4, .wmv
<video width="100%" controls>
<source data-ng-src="{{video.url}}" type="video/*">
Your browser does not support this video.
</video>
I just put a star but it is not playing my video.Showing an empty screen.Can anyone please suggest me help.Thanks.
In case you need it to support multiple types of videos, you must add multiple source of those videos. The browser picks the appropriate one to play.
And moreover, your code doesn't contain the src attribute.
<video width="100%" controls>
<source src="http://www.educationalquestions.com/video/ELL_PART_5_768k.wmv" type="video/wmv">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I am using HTML5 video player to play video constantly.Every thing is fine except the video navigation button displaying at the last of the video screen as soon as the mouse cursor moves over the video. I want to remove or hide it but not getting how to do it ..
Here is the HTML for the Video used..
<video id='video-player' autoplay="autoplay" loop preload='metadata' controls>
<source src="Video/1.MP4" type="video/mp4">
</video>
Please help me to remove the navigation bar from the last ..Thanks..
You can disabled controls via Javascript:
document.getElementById('video-player').controls = false
Or simply remove controls attribute:
<video id='video-player' autoplay="autoplay" loop preload="metadata">
<source src="Video/1.MP4" type="video/mp4">
</video>
I'm looking to remove the controls from a JS player that I have embedded on a site. The idea is to have the video autoplay with no controls.. Here is my code:
<video id="Splash1" class="video-js vjs-default-skin"
controls="off" autoplay preload="auto" width="1280" height=""
="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="movie/Splash1.mp4" type='video/mp4' />
<source src="movie/Splash1.webm" type='video/webm' />
<source src="movie/Splash1.ogv" type='video/ogg' />
</video>
I was following the instructions and I removed just controls - but then the autoplay and video does not work. However, if I put back in controls the autoplay works but I have the controller playing along the bottom.
Any tips on how to get rid of the controller? Thanks so much in advance!