I have a problem. When I go to Spotify and get the iframe code, I want it to play automatically and on repeat on my website.
I've tried the following:
<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Also tried
<iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" <button title="Play" class="b8 b9 ba ao bb bc bd be bf bg bh bi bj"><svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; color: white;"><title>Play</title><path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill="currentColor" fill-rule="evenodd"></path></svg></button> onclick="myFunction()">width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
I can't figure it out. Any ideas? I basically need it to loop.
Your second example is incorrect as you are mixing HTML for an IFRAME and a BUTTON element together.
Spotify does not allow you to auto-play its embedded player. It's unfortunate as I would like to do this too.
The closest I have got was to create a locally hosted copy of the embed on my web site, and then add Javascript to manually 'click' the Play button.
The Javascript goes before the closing </BODY> tag:
<script>
function autoplay() {
var t = setTimeout(function(){
var button = document.querySelector('[title="Play"]') || false;
if (button) {
console.log('Click', button)
button.click()
}
}, 999)
}
document.addEventListener('DOMContentLoaded', (event) => {
autoplay()
})
</script>
The timeout might not be necessary but I include it anyway.
This has worked for me inconsistently. It works the first time but then and subsequent refreshing of the page it won't. I am unable to get further than that.
It works every time if you try this in the Developer Console:
document.querySelector('[title="Play"]')
If you figure it out - please post here.
Related
Need to add an iframe into the fotorama gallery.
Tab image can be fixed.
Src should be a parameter to pass in.
Note this is on Magento 2.0
First get access to the dom element and the api object.
// Get the Dom Element.
var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
// Get the API object.
var fotorama = $fotorama.data('fotorama');
Listen for the fotorama:load event and replace the contents with an iframe.
// On load handler for fotorama.
$fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
if (extra.frame.type === 'iframe') {
// Replace the contents with the iframe.
extra.frame.$stageFrame.html('<iframe type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
}
});
Next up you can push new data for an iframe in like this.
fotorama.push({ img: 'iframe.png', thumb: 'iframe.png', 'src': 'http://someurlforiframe', type: 'iframe' });
Note: You want to have iframe.png or some other image that is thumbnailed sized ready to load in.
I used an 80x80 one.
I was able to successfully embed 3dvieweronline into the gallery using this code from a template in a custom module with working full screen functionality.
I tried $localstorage to store the file path locally and preview the file using iframe but I am getting error.
$scope.getResume = function() {
var resumeJson = {
"json":{
"request":{
"candidateid":$rootScope.globals.currentUser.userId,
"type":2
}
}
};
var getresume = "http://MyServerURL?request=" + JSON.stringify(resumeJson);
$scope.resume = $localStorage.$default({x: getresume});
}
HTML:
<iframe id="resume" src="{{resume.x}}" style="margin-top: 2em; height: 100%; width: 100%;"></iframe>
But I am getting error and its showing error message inside frame as:
Cannot GET /%7B%22json%22:%7B%22request%22:%7B%22candidateid%22:44,%22type%22:2%7D%7D%7D
When I tried to inspect the page I found iframe src = "{"json":{"request":{"candidateid":44,"type":2}}}" instead of my URL.
Look, I've wrote a Plunker for you. It's 100% working solution to dynamically set iFrame src.
https://plnkr.co/edit/tpl:CR2TtS1zz9wFGgsl5z2c?p=preview
Maybe you should just change src to ng-src.
<iFrame ng-src="{{mc.resume}}"></iFrame>
AngularJS: Alert Popup
<div class="modal-header">
<h3>
<span class="firefinder-match" data-ng-show="dialog.stopOrService === 'STOP'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.stopHeader">Add a regular alert for upcoming buses at Fairbairn Av after War Memorial Service [3473]</span>
<span class="firefinder-match ng-hide" data-ng-show="dialog.stopOrService === 'SERVICE'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.serviceHeader">Add a regular alert for route </span>
</h3>
</div>
Assertion: Using getText()
var pageHeader = element(by.css('.modal-header > h3 > span'))
expect(pageHeader.getText()).toContain('Add a regular alert');
pageHeader.getText().then(function(text){
console.log("++++++++++++++++++++++++++++++++++++++" +text);
});
Problem: Not able to get text from element
I have tried a number of ways to identify the 'Text' on model header but could not succeed in getting the text from the element. The problem looks like the element is not getting identified. Can someone please help me to resolve this issue.
As the error confirms, your selector is returning both spans within the .modal-header. You could try catching them both and specifying one (Note: I've not tested these):
var pageHeader = $$('.modal-header > h3 > span');
expect(pageHeader.get(0).getText()).toContain('Add a regular alert');
Or try another approach on the selector. Maybe try :not to return only the visible span:
var pageHeader = $('.modal-header span:not(.ng-hide)');
As the warning says, you have multiple elements (an array) found by the locator, so get(n) will be needed. you can wait until the getText() promise to resolve, and finally go for assert/expect.
var spansInPageHeader = element.all(by.css('.modal-header > h3 > span'));
spansInPageHeader.get(1).getText().then(function(text){
expect(text).toContain('Add a regular alert');
});
So wanted to have a spinning cube with pictures on, because that is what all the cool kids want. Then decided that I wanted to have it all in a database and use the mean stack, so set that up.
Here comes the problem. On the index.html version, the cube sometimes messes up and moves to the screen blocking everything else out. Just open the link below and click the menu a few different menu options a few time and you'll see what I mean.
http://v-ghost.port0.org:8081/TESTCube/public/index.html
Worked a long while trying to figure out what was wrong, and it turns out that it is related to how I load the menu, I tried to generate it using ng-bind-html.
<figure class="front"><div id="front-page" ng-bind-html="showpane('front')"></div></figure>
<figure class="back"><div id="front-page" ng-bind-html="showpane('back')"></div></figure>
<figure class="right"><div id="front-page" ng-bind-html="showpane('right')"></figure>
<figure class="left"><div id="front-page" ng-bind-html="showpane('left')"></figure>
<figure class="top"><div id="front-page" ng-bind-html="showpane('top')"></figure>
<figure class="bottom"><div id="front-page" ng-bind-html="showpane('bottom')"></figure>
Strangely, if I change this to just use text (i.e. less fancy way):
<button class="show-front">Front</button><br/>
<button class="show-back">Back</button><br/>
<button class="show-right">Right</button><br/>
<button class="show-left">Left</button><br/>
<button class="show-top">Top</button><br/>
<button class="show-bottom">Bottom</button><br/>
Try it on
http://v-ghost.port0.org:8081/TESTCube/public/index-nobind.html, unbreakable (famous last words).
What I can't understand is why, why does me calling a function in a button break the cubes path?
Also, is there an easier way to get the value of a string in an array then building a function to get it in a ng-bind?
Tried to make it as easy as possible to test around, should be just to copy the html if you want to give it a try.
After much fiddling about I never manage to figure out why ng-bind behaved like this. And without a error message it was pretty hard to identify the problem.
If you have the same problem, one way to get around it is to just change the controller to present the data under an object. So start by defining the controller as app
<body ng-app="DBFScube" ng-controller="AppCtrl as app">
Then call a sub function (getmenuname) for each option.
<button class="show-front">{{app.getmenuname('front')}}</button><br/>
<button class="show-back">{{app.getmenuname('back')}}</button><br/>
<button class="show-right">{{app.getmenuname('right')}}</button><br/>
<button class="show-left">{{app.getmenuname('left')}}</button><br/>
<button class="show-top">{{app.getmenuname('top')}}</button><br/>
<button class="show-bottom">{{app.getmenuname('bottom')}}</button>
The controller looks like this
var app = this;
//
//$http.get("http://localhost:3000").success(function(CubeSides){
// app.CubeSides = CubeSides;
//})
$http.get("http://localhost:3000").success(function(CubeSides){
$scope.sides=CubeSides;
console.log("Loading data");
})
app.getmenuname = function(side) {
if($scope.sides === undefined) {
console.log("Not loaded fside " + side );
} else {
console.log("Got menu pane " + $scope.sides);
var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
console.log("Sending: " + fside.menuname);
return fside.menuname;
}
}
This probably isn't the right way of doing it, but if all you need to do is set the name on some buttons, it does the trick:)
i`m busy on a music store web application with JAVA for back-end and Angular JS/HTML5/CSS3 for front-end.
ammm, and for music play back i used Sound Manager Java Script Library, all thing work fine with static 360 player, but when i try to use sound manager in ng-repeat directive, that not works, any suggestion please ? and is sound manager works with live dom elements created by angular js "ng-repeat" ?
Sound Manager Init
// init Sound Manager
soundManager.setup({
// path to directory containing SM2 SWF
url: 'player/'
});
threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
threeSixtyPlayer.config.showHMSTime = true;
// enable some spectrum stuffs
threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;
// enable this in SM2 as well, as needed
if (threeSixtyPlayer.config.useWaveformData) {
soundManager.flash9Options.useWaveformData = true;
}
if (threeSixtyPlayer.config.useEQData) {
soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
soundManager.flash9Options.usePeakData = true;
}
if (threeSixtyPlayer.config.useWaveformData || threeSixtyPlayer.flash9Options.useEQData || threeSixtyPlayer.flash9Options.usePeakData) {
// even if HTML5 supports MP3, prefer flash so the visualization features can be used.
soundManager.preferFlash = true;
}
Angular ng-repeat
<div class="mod-contents">
<div class="questions-block" ng-repeat="question in filtered = ( questionList | filter:searchKey | orderBy : predicate : reverse)">
<div class="col-xs-12 col-sm-4 col-md-3 pull-right">
<div class="thumbnail block-black ">
<h3 class="block-title rtl-element">{{ question.description }}<span class="text-muted"> ({{ question.cat_code }}) </span></h3>
<div class="ui360 ui360-vis player-wrapper-md player-md "></div>
</div>
</div>
</div>
</div>
I was having the same problem. I think I know why it's happening. I believe in the javascript for sound manager it looks for instances of a sound manager player and doesn't find any. The ng-repeat section is not static; it can change. So when you load the page and the sound manager loads, the ng-repeat section does not yet contain any elements. Therefore sound manager decides not to add an event handler for checking if you click on the button.
I edited the mp3-player-button.js and in the init section I commented out where it said "if (foundItems>0)" so that it always adds the sound manager event handler.
This solution is a little hacky - so maybe you can implement something smarter. But it works for me. Hope it Helps!