SoundCloud HTML5 widget: share panel covers waveform when audio finished - html

When the audio completes in the HTML5 version of the SoundCloud widget, the share panel appears and covers the audio waveform. The user can replay the audio; however, the share panel doesn't disappear, nor does there seem to be any way for the user to hide it. Nor is there any way to prevent the panel from appearing in the first place, which is the ideal option.
The "sharing" parameter is set to false in my embed code.
Here is the embed code I'm using:
<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F87283114&buying=false&sharing=false&liking=false&show_artwork=false&download=false&show_user=false&show_bpm=false&show_playcount=false&show_comments=false&color=568ED4&theme_color=DDD9C3"></iframe>
Replicated in Firefox and Chrome.
Again, this is an HTML5 issue only. The Flash version works properly.
Note that a similar issue also occurred but was fixed in the Flash version:
New SoundCloud HTML5 widget animation on track finish

Related

Embedded Vimeo videos lost controls and logo after starting Pro trial

I was able to embed Vimeo video just fine with the Basic account. However, I now started Pro trial and all controls disappeared. So, if I pass playing={true} to <ReactPlayer>, the video plays just fine. Otherwise, it looks as a screenshot of the first frame of the video. Even the Vimeo logo does not appear.
The controls are enabled in the video's settings (and appear in the player inside Vimeo):
What could be the reason for the controls not showing in the embedded videos?
I had to explicitly pass controls={true} to <ReactPlayer>. It is unexpected and surprising that this is not the default...

How to fix embed code to display video cleanly/properly?

I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.

ios 10 youtube iframe not playing

I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />

Flash object not autoplaying (tumblr)

I have a flash object I need to embed on my tumblr blog (Billy's audio player) and the embed works fine, except that I need to click a white play button before the object works:
(this is in Chrome; there is a similar play button on Edge)
However, other websites don't have this play button over the widget, including the widget's own webpage and the bottom left of this blog.
This is the embed code, taken directly from the Billy's audio player webpage (with added newlines for readability):
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1"
quality="high" wmode="transparent" width="200" height="10" name="billy"
align="middle" type="application/x-shockwave-flash" title="Adobe Flash Player">
Is there something I can add to make the flash object run automatically? I doubt it's a browser issue, as it works on some other webpages, and other viewers also see the white play button.
However, other websites don't have this play button... including the
widget's own webpage.
SWF and HTML must be in the same exact location (ie: web folder).
If SWF url is : http://www.sheepproductions.com/billy/billy.swf
then HTML must be : http://www.sheepproductions.com/billy/pageWithSWFembeded.html
This issue is caused by the small width/height of your SWF. Browsers assume it is a Flash advert banner and do not auto-load it. It can be fixed by either increasing SWF display size or by putting the small SWF in same location as HTML page that loads the SWF.
Also consider using HTML5 audio tag to guarantee playback of website audio even on mobile devices (they don't run Flash content within default browsers).

Youtube iframe issue, only play when clicked with autoplay 1

We have the following youtube iframe embedded in our application:
<div class="youtube">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<%# Eval("YouTubeId") %>?autoplay=0&autohide=1&controls=1&loop=0&playlist&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=1&iv_load_policy=1&start=0&theme=dark&color=red&enablejsapi=1&" frameborder="0" allowfullscreen></iframe>
</div>
<div class="poster"><span></span><%# IfImage("Thumbnail",GetBrickImage(Eval("Thumbnail"), "featurevideo", Eval("Title")), "") %></div>
We currently display a thumbnail for the video, when the user browses to the site and they click on the thumbnail to play the video the standard Youtube play button appears which makes the user click again which is very annoying. I changed the autoplay from 0 to 1 which fixed the issue in Firefox, opera, safari, and IE but when viewed on chrome the video starts playing automatically as soon as the page has loaded, but the thumbnail is still visible. So you don't actually see the video you only hear the content, I'm out of ideas on how to get this to work correctly, has anyone come across this? if so how did you fix it?
As far as the Chrome issue goes, I'm a little stumped.
However, when using defered video playing I would load the src of the iframe using javascript when the user clicks the Thumbnail. This way the video won't even load until the user wants to view it, which saves on bandwidth and loading time too.