I’m trying to remove just setting the gear icon but If I set false for controls it’s going out all other like Play/Pause.
If I’m using my own player it’s ok BUT I want to use Cloudflare Player, not my custom player. Because in Cloudflare player there have 1x auto and other options which are not in my player. (Using the player API)
Can anyone help me by giving a code example ?
<iframe
src="https://iframe.videodelivery.net/$5d5bc37ffcf54c9b82e996823bffbb81"
style="border: none;"
height="555"
width="666"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
id="stream-player"
></iframe>
<script src="https://embed.videodelivery.net/embed/sdk.latest.js"></script>
<!-- Your JavaScript code below-->
<script>
const player = Stream(document.getElementById('stream-player'))
player.addEventListener('play', () => {
console.log('playing!')
})
player.play().catch(() => {
console.log('playback failed, muting to try again')
player.muted = true
player.play()
})
</script>
Related
I have been using the same file for over a year and suddenly on my local environment, my Google Maps API keeps opening up a "Keyboard Shortcuts" pop up when hitting enter. Usual when hitting enter, my cursor moves to the next required input field in the form. I have made no changes to my code but I have updated Sublime Text, my Text Editor and it seems to support .blade.php files now.
How my JavaScript looked after the update:
I ended up fixing the code and here is my code currently:
My Form:
Client Address
Search Client Address
</x-slot>
<div class="form-group row">
<div class="col-lg-12">
<label>Physical Address<span style="color: red"> *</span></label>
<input type="search" id="searchmap" class="form-control" placeholder="Search Address..." name="address">
<input hidden type="text" name="lat" id="lat" required>
<input hidden type="text" name="lng" id="lng" required>
<br>
<div class="form-group">
<div id="map-canvas"></div>
</div>
</div>
</div>
<!-- end::Row -->
<div class="form-group row">
<div class="col-md-12">
<label>Address Comments</label>
<textarea class="form-control" name="address_comments" id="address_comments" rows="3"></textarea>
</div>
</div>
</x-card>
My JavaScript:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat: -26.18,
lng: 28.04
},
zoom:9
});
var marker = new google.maps.Marker({
Position: {
lat: -26.18,
lng: 28.04
},
map: map,
draggable: true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for(i=0; place=places[i];i++){
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location); //set marker position new...
}
map.fitBounds(bounds);
map.setZoom(18);
});
google.maps.event.addListener(marker,'position_changed',function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
});
</script>
The pop up window:
If you don't need actual keyboard shortcuts button to display, you could hide it by setting the control options for the google map instance by:
keyboardShortcuts: false
The documentation doesn't specifically show you this, but they do mention the control at: https://developers.google.com/maps/documentation/javascript/controls
I had a similar problem on an older project I have to fix issues on. The Google Maps container is part of a <form>. However, this <form> has no action and in JavaScript there was no listener attached to the submit event.
<form class="some-class">
...
<div id="map-canvas"></div>
...
Send
</form>
The <a> has a click event attached to it, and will gather all data from the form and send it via ajax to an endpoint. There was also a keyup listener event where the "Enter" key was used to submit the data.
So this form breaks all kinds of rules
no action, thus page refreshes if submit event is triggered and nothing will have happened
the <a>-tag should have been a submit button, and the <form> should have a listener for the submit event
keyup event should not be necessary, the form handles the enter key automatically
the form shouldn't have been part of the form in the first place
The above breaks since a recent Maps change, where keyboard features were added. The Maps takes over the "Enter" key, instead showing the kayboard shortcuts of Maps.
We fixed this legacy code by changing the tag in a and attach a event listener to the form that listens for the submit event. We also removed the map out of the form, but this is not the cause of the issue.
Anyhow, another fine example of where native HTML element and JavaScript features should be used for what they are created for.
A bit hacky but you can use:
[class*='-keyboard-shortcuts-dialog-view']{
display:none;
}
The audio tag works fine when i open the page via router-link(from another page), however if i refresh this current page with audio tag, audio didn't reload, is there anything that i need to add or change? or i should try other method than audio to play audio files?
Below are my code:
Should I try another method to play .mp3 files?
<template lang="pug">
audio#player(autoplay="" loop="")
source(src="#/assets/alertsound.mp3" type="audio/mp3")
</template>
I am not really sure whats causing this exactly but there is another way you can play your audio ...this will trigger the audio load() :
new Vue({
el: "#app",
mounted: function() {
this.$nextTick(() => {
this.$refs.audio.load()
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<audio ref="audio" autoplay loop>
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"
type="audio/ogg"
>
</audio>
</div>
</div>
I am using Vue-strap alert component with Vue.js. The alert box works fine, however, I am unable to auto close the alert box after specified duration. Here is the component code I am using.
<alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
The alert box remains open and close on clicking the close (x) button. Here is a code pen that uses the alert component.
https://codepen.io/Taxali/pen/dKJpKY
Any suggestion, how to auto close the alert box after 3 seconds? Thanks.
According to source code, setTimeout(_, duration) is only set if show props is change.
So there is a workaround, you can toggle show from false to true in mounted methods, or you can use a button to toggle the alert.
Another way to setTimeout yourself in Vue component.
var vm = new Vue({
components: {
alert:VueStrap.alert,
},
el: "#app",
data: {
alertMessage:"Activity Saved Successfully.",
showAlert:false
},
mounted() {
this.showAlert = true
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="app">
<alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
</div>
I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' · <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.
I am not experienced in Javascript, I have the following script to play video files on Andriod phone, and it works fine.
<script type="text/javascript">
function PlayMyVideo(arg) {
var myVideo = document.getElementById([arg]);
myVideo.play();
}
</script>
<video id="what" src="what.mp4" poster="" />
<input type="button" onclick="PlayMyVideo('what')" value="Play" />
I am trying to write the tag on the fly:
<script type="text/javascript">
function PlayVideo() {
new_video = document.createElement('video');
new_video.setAttribute('scr', 'what.mp4');
new_video.play();
}
</script>
<input type="button" onclick="PlayVideo()" value="Play2" />
Nothing happen, would appreciate your suggestions.
Thanks in advance
new_video.setAttribute('scr', 'what.mp4');
'scr' is misspelled. It should be 'src'.
and also you should wait for the movie to load before play
Well you're not appending the newly created tag to anything, so it can't play because it's in "memory"/"void", not on the screen.
<div id='plc'> </div>
<script type='text/javascript'>
function PlayVideo() {
new_video = document.createElement('video');
document.getElementById('plc').appendChild(new_video);
new_video.setAttribute('scr', 'what.mp4');
new_video.play();
}
you are creating the video element, you need to add it to the DOM before it will be visible, more info here: http://www.javascriptkit.com/javatutors/dom2.shtml