I need to customize my HTML5 audio control like this:
Can any one solve my problem?
Here is what I have so far:
audio::-webkit-media-controls-panel
{
background-color:powderblue;
}
// audio::-webkit-media-controls-mute-button
// audio::-webkit-media-controls-play-button
// audio::-webkit-media-controls-timeline-container
// audio::-webkit-media-controls-current-time-display
// audio::-webkit-media-controls-time-remaining-display
// audio::-webkit-media-controls-enclosure
// audio::-webkit-media-controls-timeline
// audio::-webkit-media-controls-volume-slider-container
// audio::-webkit-media-controls-volume-slider
// audio::-webkit-media-controls-seek-back-button
// audio::-webkit-media-controls-seek-forward-button
// audio::-webkit-media-controls-fullscreen-button
// audio::-webkit-media-controls-rewind-button
// audio::-webkit-media-controls-return-to-realtime-button
// audio::-webkit-media-controls-toggle-closed-captions-button
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
We are forced to use per browser special css like you shown, to modify button aspects. This is built-in in browser.
It would be easier to make the button yourself and control with js (very easy nowadays, no need for a plugin). onclick="player.play()" for example.
Or we can hack the apparence with css filters on them. It won't change the aspect but add some effects, try to mouse over the button.
For the example, button and some details are on the same green, obtained with the hue-filter. It will actually render greeny on all browsers.
The invert filter will display in black if the default is white, etc. .
audio {
filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(46deg) invert(12%);
}
<audio
controls
src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>
See this script i use to make, to see what is doable with css filters.
https://codepen.io/Nico_KraZhtest/pen/bWExEB
Edit: See the following simple base javascript solution: clicking the image will start the (hidden) player...
audio {width:0px}
img {cursor:pointer}
<audio
id="player"
controls
src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>
<img onclick="player.play()" src="https://i.stack.imgur.com/6pUED.png">
Related
I have this code inside
and I have the .css the class myvideo (It doesn't need this code ),it is the design.
What I want to know is ,how can I do pause and unpause this video.I try to stop my video and I didn't manage it.If you could help me with it I will be greatful.Thanks
<div class="myvideo" style="left: 6px; top: 0px">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="exr.mp4" type="video/mp4">
</video>
If you want to have control over a video element you must use JavaScript to control it. Here's a great example of how to control a video object from JavaScript: https://www.w3schools.com/tags/av_met_pause.asp
You may need to add another HTML element to control your video. This element must listen to a click event. After that, you will be able to do what you want with the video.
const videoEl = document.getElementById("video-bg-elem");
// Will play the video
videoEl.play();
// Will pause the video
videoEl.pause();
Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):
I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature?
I realize that if this is showing, it's already easy to download the video, I just want to disable that functionality from appearing as part of the controls.
Thank you!
or you can simply add nodownload in controlsList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM
After that you can inspect the players buttons.
Now the problem is that the download button cannot be accessed via CSS for some reason.
video::-internal-media-controls-download-button {
display:none;
}
won't work.
Even selecting the preceding button and targeting its neighbor using + or ~ won't work.
The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden
video::-webkit-media-controls {
overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
I hope google will fix this issue soon because most content providers won't be happy with this...
Demmongonis solution does work but be aware it can lead to unwanted results.
Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)
Update
It is posible now to hide the download button using the controlsList attribute:
<video controlsList="nodownload" ... />
Yes, this is possible now, at least at the time of writing, you can use the controlsList attribute:
<video controls controlsList="nodownload">
<source data-src="movie.mp4">
</video>
It seems this was introduced in Chrome 58, and the documentation for it is found here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons.
Usage in HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
There is even an official sample page: https://googlechrome.github.io/samples/media/controlslist.html
One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.
Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.
Example disabling both download and picture-in-picture:
<video disablepictureinpicture controlslist="nodownload">...</video>
Details: https://wicg.github.io/picture-in-picture/#disable-pip
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
To keep it simple.. You need to add an attribute called controlslist (LOWERCASE, directly after controls) and you need to set its value to ="nodownload". Also, make sure your src file(type) and your attribute type's value match, unlike some of the above examples; my link is to a file named 'sunrise over water.mp4' on my Google Drive. How I do it looks like this:
<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4">
Video Not Supported By Your Browser...
</video>
OR
<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload">
<source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4">
Video Could Not Be Played In Your Browser... Sorry.
</video>
In addition to above answers you have to add following code to disable context menu:
index.html: (globally)
<body oncontextmenu="return false;">
OR you can disable context menu for some element:
element.oncontextmenu = function (e) {
e.preventDefault();
};
Plain javascript to disable the "download" Button from a video in your page:
<script>
window.onload = function() {
video = document.querySelector('video');
if (video) {
video.setAttribute("controlsList", "nodownload");
}
};
</script>
If you want to, you can also is querySelectorAll and remove each video. In my example I just have only one video per page.
The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.
Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.
Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.
Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.
I hope Google provides the option to adjust this ASAP.
I using following JavaScript snippet which is working very well:
document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));
Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4
I am using Video.js to play videos in my web page.
I want to customize player controls to only play button.
my code is
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="320" height="240" poster="thumb.png"
data-setup="{}">
<source src="v1.mp4" type='video/mp4'>
</video>
Can any one guide me in player customization?
The way I was able to do it was by setting the css class for specific controls to display: none; in my page's CSS. My page's CSS gets linked AFTER the video-js.css gets linked.
/* Video.js Controls Style Overrides */
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-time-controls,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-fullscreen-control {
display: none;
}
If you can't link your page's CSS after the video-js.css gets linked, you can use display: none !important; instead and that should do the trick. Although, I'd only use !important as a last resort.
Note: The above does not remove the pause button once play is hit nor the big play button. There are more UI considerations when removing those. Hopefully this will help some people with customizing the Video.js control bar.
The easiest way I have found is modifying the prototype for the class as such.
Insert
<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
right after
<script src="http://vjs.zencdn.net/c/video.js"></script>
This will remove every control ( including the duration, time remaining and seek bar ) besides the play toggle button
If you would like other things, you may pick and choose from the defaults (a few of these are set to hidden on the default skin)
options: {
components: {
"playToggle": {},
"fullscreenToggle": {},
"currentTimeDisplay": {},
"timeDivider": {},
"durationDisplay": {},
"remainingTimeDisplay": {},
"progressControl": {},
"volumeControl": {},
"muteToggle": {}
}
}
Or dig through the controls.js file on git hub
https://github.com/zencoder/video-js/blob/master/src/controls.js
It seems there is also an option to hide/show the controlBar items via data-setup
The components are listed at
https://github.com/videojs/video.js/blob/stable/docs/guides/components.md
and the description of options https://github.com/videojs/video.js/blob/stable/docs/guides/options.md
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
the controlBar is passed as follows:
data-setup='{ "controlBar": { "muteToggle": false } }'
Edit: as commented, the behaviour of children for options has been simplified and changed, see also the documentation: https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options
For the background and timings of these changes, see https://github.com/videojs/video.js/issues/953
the css selector for the big play button is
.vjs-default-skin .vjs-big-play-button
but please make sure you have alternatives or an appropriate setup when you remove the play option (;
mine appears to hide the controls by default(?)
This also removes all the control bar but not the big play button
.vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}
If you also want to get rid of the play button, and just have the video play and stop on clicking, check out this alternative solution, which I adapted.
Insert into your <head> (or elsewhere if not possible) ...
<script type="text/javascript">
function vidplay(me) {
if (me.paused) {
me.play();
} else {
me.pause();
}
}
</script>
then call from your video, e.g.
<video onclick="javascript: vidplay(this)" ...>
Make sure that you do not set the controls in your video tag. Obviously this way, you can fiddle in your own custom button, which the linked solution does.
I'm trying to get a html 5 video to play on mouseover. It works fine in firefox and safari just in chrome the video blanks out when i hover and becomes visible only after i hover on another element on the page....
This is the site: www.manart.de
This is the code:
<div id="wrapper">
<video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
<source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
<source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
</video>
</div><!--end wrapper-->
<script src="fileadmin/js.js"></script>
And this is the js:
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
Thanks for helping!!!!
It's a bit odd that, but if you remove the poster frame (I also made sure that the hideVideo method was defined to avoid an exception being thrown) it works (fiddle).
I tried using a JPG instead of a PNG for the poster frame with the same results (fiddle). And when you substitute your video for one with sound, it's apparent that the video is playing, but that it's invisible (fiddle).
Looks like a bug in Chrome to me but Google didn't throw much up when I searched (maybe my terms were wrong).
The quick fix, therefore, is probably to simply remove the poster frame which, since Chrome will display the first frame of the video when it has loaded, is probably pretty close to what you're looking for anyway.
Update:
Alternatively, you could use the hack detailed in this thread on a similar issue which involves dynamically adding controls to the player before playback starts and removing them again immediately (fiddle). The author has confirmed the issue as a bug in Chrome by verifying that it does not occur in Chrome 19.
HTML:
<div id="wrapper">
<video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
<source id='mp4'
src="http://www.manart.de/fileadmin/schiffchen.mp4"
type='video/mp4'>
<source id='ogv'
src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
type='video/ogg'>
</video>
</div>
JavaScript:
var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);
function hoverVideo(e) {
if (vid.getAttribute('controls') != 'true') {
vid.setAttribute('controls', 'true');
}
vid.play();
vid.removeAttribute('controls');
vid.addEventListener('mouseout',hideVideo,false);
}
function hideVideo(e) {
// do whatever you were going to do here, but omitting
// the method completely causes an exception
//vid.pause();
// clean up the listener when finished
vid.removeEventListener('mouseout', hideVideo);
}
I was wondering if it's possible to set the width of the audio tag. It is not a supported feature by default, so "hacks" will be happily accepted.
I already tried putting them in small div's and tables, but that doesn't look very smooth... As far as I can see, I'm the only one bothering about it, but I really appreciate some help
There is no need for cross-platform/browser support; I'm happy as long as FireFox (3.6 ++) supports it.
Quick example as to what I'll be using:
<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>
Set it the same way you'd set the width of any other HTML element, with CSS:
audio { width: 200px; }
Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.
For those looking for an inline example, here is one:
<audio controls style="width: 200px;">
<source src="http://somewhere.mp3" type="audio/mpeg">
</audio>
It doesn't seem to respect a "height" setting, at least not awesomely. But you can always "customize" the controls but creating your own controls (instead of using the built-in ones) or using somebody's widget that similarly creates its own :)
You also can set the width of a audio tag by JavaScript:
audio = document.getElementById('audio-id');
audio.style.width = '200px';
You can use html and be a boss with simple things :
<embed src="music.mp3" width="3000" height="200" controls>