I need to hide the icon encircled on the picture below? How can I hide it? I'm using react-player.
Pls check this codesandbox
CLICK HERE
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
controls
/>
The HTML5 <Video /> tag supports disabling this feature via the disablepictureinpicture attribute. This is still an experimental feature, and might not work in all browsers.
Pass the disablePictureInPicture html attribute via the ReactPlayer's config. If the Picture in Picture control doesn't disappear try setting controlsList: 'nodownload' as well.
const config = {
attributes: {
disablePictureInPicture: true,
controlsList: 'nodownload'
}
};
const App = () => (
<div style={styles}>
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
config={config}
controls
/>
<h2>Start editing to see some magic happen {'\u2728'}</h2>
</div>
);
Related
I'm using https://identicon-api.herokuapp.com/ to embed identicons in my page. You can choose either SVG or PNG. PNG works just fine, but for performance reasons, I want to use SVG. But when I use SVGs, the image isn't found, and the alt-text is displayed.
Nevertheless, the URL is valid, and when I open the image in a new tab, it's rendered correctly.
<img
v-if="iconsenabled"
style="max-width:1.75em"
:src="'https://identicon-api.herokuapp.com/'+e.author+'/2000?format=svg'"
:alt="e.author+`'s identcon.`"
:title="e.author+`'s identicon. Toggle 'show icons' to see the name instead`"
/>
(BTW, Yes, I'm using Vue, but that doesn't affect anything)
The SVG has an incorrect MIME type set by the server. <img> requires the MIME type to be image/svg+xml, but https://identicon-api.herokuapp.com/ currently sets it to text/html, which causes a loading error:
For reference, here's a sample SVG with the proper MIME type that renders correctly in an <img>:
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Sample-image.svg" width="200">
As a workaround, you could fetch the SVG, convert it to a base64 string, and use that as a data URL:
<img :src="'data:image/svg+xml;base64,' + __SVG_BASE64__">
Example:
new Vue({
el: '#app',
data: () => ({
myImgUrl: ''
}),
mounted() {
fetch('https://identicon-api.herokuapp.com/tony19/2000?format=svg')
.then(resp => resp.text())
.then(text => this.myImgUrl = 'data:image/svg+xml;base64,' + btoa(text))
}
})
<script src="https://unpkg.com/vue#2.6.12"></script>
<div id="app">
<img :src="myImgUrl" width="200" height="200">
</div>
I was messing around to find a way to pause or mute a video, if we take off our cursor from it with using HTML5 and CSS3 only.But i was unable to find a way.
Is there any way to achieve this ?
If you're using jQuery and HTML5 video, you could do something like:
var vid = $(".myVideo");
vid.mouseleave(function() {
vid.pause()
});
Then, when you want to play again,
vid.mouseenter(function() {
vid.play()
});
The functions vid.play() and vid.pause() are built in so this shouldn't give you any trouble.
Your HTML:
<div id="video-wrapper">
<video id="v" src="video.mp4" controls></video>
</div>
Getting video element using jQuery:
var v = $("#v");
Check if video is ready to play:
$(v).on('canplay', function(){
$(v).mouseenter(function(){
$(this).get(0).play();
}).mouseleave(function(){
$(this).get(0).pause();
})
});
But with what I have done, if I make the display mode : none or block then I cant make it shown on click.
Also when I click on the show/hide image it scrolls at the beginning of the page, instead of staying at the same place and showing the iframe.
Any help for that?
With that below I made the show/hide function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#on").click(function(){
$("map").show();
});
$("#off").click(function(){
$("map").show();
});
});
</script>
I frame and image are:
<div id="show/hide" align="center">
<a href="#" id="on">
<img src="http://icons.iconarchive.com/icons/double-j-design/apple-festival/256/app-map-icon.png" width="80" height="80">
</a>
<div id="map" style="display:block ;">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
Your page is scrolling because display:none actually "deletes" the iframe from the DOM, which using a CSS style of visibility: hidden; would leave the iframe in place, but just hide it.
If that's what you would like to do then use the following (notice the visibility:hidden style):
HTML
<div id="map" style="display:block; visibility:hidden">
<iframe src="https://mapsengine.google.com/map/embed?mid=zkhFhUgoi5X4.kL86cmKz_OL8" height="300px" width=" 100%" ></iframe>
</div>
You can choose to use display: block, or any other display style you want -- just DO NOT use display: none, as it will act as if it REMOVES the object from the DOM.
JavaScript:
$(document).ready(function(){
$("#on").click(function(){
if ( $("map").css('visibility') = 'hidden') {
$("map").css('visibility') = 'visible';
}
else {
$("map").css('visibility') = 'hidden';
}
});
});
If you call preventDefault(); on a clicked a tag, you can cancel the "scroll event". Implementation can look something like this. Demo.
$(document).ready(function () {
$('#button').click(function (e) {
$('.map').fadeToggle();
});
});
I believe this will fork for you if you place the # in front of the id in your jquery command:
$("#map").show() and $("#map").hide()
Also, you have called .show() on both functions. I would assume on your second you would like to call .hide()
I am trying to create a layered div using z-index and one of the layers have to contain a flowplayer. Once layer is created properly I will update div's z-index value based on program's logic. Following code works in Chrome but not in Firefox and IE.
Problem: In IE and firefox div containing flowplayer does not hide.
<div id="dvd_supplement" style="height:200px;width:300px;">
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<div style="z-index:11;position:relative;top:0px;">
<a id="player"
href="barsandtone.flv"
style="width:300px;height:200px"
>
</a>
</div>
<div style="z-index:2;position:relative;top:-200px;">
<img id="player_laptop_screen" src="images/laptop_screen.jpg" width="300px" height="200px"/>
</div>
<div style="z-index:3;position:relative;top:-400px;">
<img id="player_img" src="images/blank_screen.jpg" width="300px" height="200px"/>
</div>
</div>
I have resolved this issue by using wmode option in flowplayer() i.e.
flowplayer(
"player", {src: "../flowplayer/flowplayer-3.2.16.swf", wmode: "opaque"}, {
clip: {
autoPlay: false,
autoBuffering: true
}
}
);
Flowplayer configuration has a zIndex attribute
So consider using
$f("selector","path-to-your-swf",{
option 1:...,
option 2:...,
option 3:...,
zIndex: value,
...,
...,
});
I feel like I'm taking crazy pills here because I can not figure out how to render the html 5 audio tag with custom controls.
I have this html so far, and it works no problem:
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
How do I get it to display ONLY the play button, and perhaps when playing, show the pause button in it's place.
From what I read,
By default, the element will not expose any sort of player controls.
You can create your own controls with plain old HTML, CSS, and
JavaScript. The element has methods like play() and pause() and a
read/write property called currentTime. There are also read/write
volume and muted properties. So you really have everything you need to
build your own interface.
If you don’t want to build your own interface, you can tell the
browser to display a built-in set of controls. To do this, just
include the controls attribute in your tag.
But I can not find any examples of using custom controls. How do you get just the play button?
You create your elements like so...
<audio id="yourAudio" preload='none'>
<source src='the url to the audio' type='audio/wav' />
</audio>
play!
And add some functionality:
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
};
Right now, the button is just simple text ("play!" or "pause!"), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the className and you're good to go!
After a lot of research, I found an easy way of eliminating and manipulating specific parts of the predefined controls.
Create your elements as you usually would, like so:
<audio autoPlay>
<source src='audioUrl' type='audio/mpeg' />
</audio>
Then in the CSS file, you write the following:
/* Specifies the size of the audio container */
audio {
width: 115px;
height: 25px;
}
audio::-webkit-media-controls-panel {
-webkit-justify-content: center;
height: 25px;
}
/* Removes the timeline */
audio::-webkit-media-controls-timeline {
display: none !important;
}
/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
display: none;
}
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
With this code, you should get a small and nice looking container with only mute-button, pause/play-button and the 'download-file'-tag.
For an overview of all the things you can modify, have a look here.
The following code will also remove the mute- and the play-button:
/* Removes mute-button */
audio::-webkit-media-controls-mute-button {
display: none;
}
/* Removes play-button */
audio::-webkit-media-controls-play-button {
display: none;
}
I have been experimenting with the use of a graphic instead of the player. Set the style within the 'audio' tag to "display: none; width: 0px; height: 0px;" (display none does not work on iPad, thus the additional width-0 and height-0 settings). Also not including the "controls" attribute should work. (different systems/browsers & desktop vs iOS all act differently.....)
Eg:
<head>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
</script>
</head>
<body>
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>
The "javascript:null()" works on iPad in conjunction with "return false;" as opposed to the usual "#".
For more really useful information:
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
if you want the built-in play-button only you could:
use autio-tag's class attribute:
<audio controls preload='auto' class="audio_volume_only"><source src='the url to the
audio' type='audio/mp3' /></audio>
and fit the css:
.audio_volume_only {
width: 35px;
}
i hoped controls has some parameters, but not found any or misunderstood .. we'll see.
then possibly use audio's onplay - event to change the css to your need.
the play-button will become the pause-button in built-in controls
as others pointed out, you can always make your own....