I'm trying to have a short sound that I can play over multiple times by simply the play button on AMP. On Safari (desktop and mobile) the sound will only play once.
The sound is supposed to be triggered when the user clicks a button.
I've followed the amp documentation for the amp-audio and the audio events
<amp-audio preload="none" id="audio" controlslist="nodownload" hidden>
<div fallback><p>Your browser doesn't support HTML5 audio</p></div>
<source type="audio/mpeg" src="/media/shortSound.mp3">
<source type="audio/ogg" src="/media/shortSound.ogg">
</amp-audio>
The "native" audio button is hidden and is triggered by clicking the following button (with the on:tap event)
<div class="button" on="tap: audio.play" role="button" tabindex="0"></div>
I have also tried using absolute URLs in vain and using the pause function before play but to no avail.
Note: Unfortunately there is no .load event to circumvent the problem like with HTML5 on Safari (which is how I got to play it on Safari on the non-amp version)
Actual result: The sounds play once (the first time I click it). The rest of the time nothing happens, no message in the console either. What am I doing wrong?
I have found the issue was with the mp3 encoding of my files. It uses VBR instead of CBR, the problem doesn't happen when using CBR encoded mp3 files. To check your encoding I recommend using https://checkmate.gissen.nl/download.php
EDIT: IT was actually because Safari uses HTTPRange to get its resources instead of a classic get method.
Hopefully the loop attribute on <amp-audio> can help here: https://amp.dev/documentation/components/amp-audio/?format=websites
Related
I've searched a bit here on SO to find a way to show instagram video using the public api ?__a=1 method. I've found a question that have pointed me into the right direction but not at all.
after I get the user media, I'm checking in my vue app if the resource is a video or an image and if is a video I show an html5 player where I'm binding the url that is obtained form the public json api. What I'm facing is that the player will not reproduce the video, but if I use the url into the browser, an html5 player is loaded with the related video that will start playing.
The video urls returned are something like this one:
"https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
I've tried to remove all the part after the .mp4 file extension but this will not work, so I suspect that all the url is needed. Is there a way that I can use to reproduce video in my app?
After many tryes unfortunately I didn't figured out how to use my own HTML5 player so I've used a simple solution. An <iframe> with the url set will let the vido play into the app, this exclude me from the ability to remove the download button or controls from the player but at the moment it's the only way I can implement to achieve my scope.
(1) Your link works okay for me in a video tag:
<video width="640" height="480" >
<source src="https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
type="video/mp4">
</video>
(2) It even works okay in this random demo that uses vue.js.
With no demo page of your problem the solution is a guess...
Make sure that your own site URL starts https:// or else change the video src to http://...etc.
Make sure your server (settings?) isn't somehow blocking you from loading the file.
If still failing, show us the problem via some link to your testing page.
I am trying to use videogular2 and I have simply replaced the static video content link with a shareable link from Google drive that points to an MP4 video file.
<vg-player>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="https://drive.google.com/open?id=xyz" type="video/mp4">
</video>
</vg-player>
Under Chrome browser the video player shows a resistance icon at the center and cannot play anything as it can be seen at the following screenshot:
Under Internet Explorer the video player shows the text "Invalid source" and the play button on the left as it can be seen on the next image:
But if I use the sample URL: http://static.videogular.com/assets/videos/videogular.mp4
it works very well.
I would appreciate any ideas/pointers related to what I am doing wrong.
I had the same problem and solve it using an address like the following:
https://drive.google.com/uc?id=ID_OF_YOUR_VIDEO&export=download&authuser=0
thank you for reminding me this. I found the answer long time a go but I haven't updated SO. I will accept your answer of course.
In order to view a Google video from my application (not necessarily using the Videogular plugin) I used an iframe:
<iframe src="https://drive.google.com/file/d/ *** VIDEO ID *** /preview?pli=1" frameborder="0" target="_parent">
</iframe>
If you want to start the video from a specific time and not from start add this parameter at the video url:
&t=10
where 10 is the start time in seconds. In this case the video will start playing from the 10th second.
I've loaded this embed code to our website on the homepage.
https://player.vimeo.com/video/254985863?autoplay=1&loop=1&autopause=0&background=1" width="1903" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
You can see the site here
The video autoplays perfectly everywhere except Safari. In Safari it just loads the cover image. I am guessing that safari 11 thinks the video has sound but it doesn't. Is there a setting to show safari that this is a muted video?
I believe this is a very recent Safari bug, possibly in 11.0.3 or 11.0.2. I've just reported this to Apple, please do the same so that they get on it: https://www.apple.com/feedback/safari.html
It's definitely treating the video as if it has sound - if you set the 'Settings for this website' to 'allow all autoplay' then it will work - which is useless because the default is 'Stop Media with sound'
We were experiencing the same issue with Safari (only) for background video and I have been paying close attention to this thread since it was raised back in February (I did report the issue to Apple as suggested) but upon checking the live site again today this is now working correctly once again.
Neither the Vimeo videos or website code has been changed but the videos are now playing in Safari as expected (previously it was displaying a static image only). I am still running the same version of Safari as I was before, when this was an issue (11.0.3), so I can only assume that something has changed on the Vimeo embed side of things. Perhaps they have updated the mute code.
It is now working correctly again, but I can find no mention of anything changing on the Vimeo side.
on https://www.apple.com/safari/
"Stop auto-play videos.
Safari prevents unexpected and unwanted videos with audio from automatically playing while you browse. Just click the play button if you want to view them. Have a favorite site where you always want videos to play? Use per‑site settings in Safari to enable media auto-play."
I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.
The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline#L1.3)
Here is the HTML source:
<video controls class="img-responsive">
<source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
<source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>
Someone has had the same issue?
There are a couple of things you need to fix/take into account:
your videos play well in Chrome but IE displays an error message and firefox just won't read them.
your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here
Suggestions to fix it:
use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.
Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).
You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.
I am creating an app for a radio station and I am using MediaElement and MediaControls. But when I try to Stop or Pause the playback it does not work. After searching in MSDN I found that Start, Stop and Pause will not work in this case "Stop cannot be called while the timing engine drives media playback."
I manages to stop the playback by assigning null to mediaelement.Source but then the same problem appears in Start().
Can anyone explain what is going on here? Thank you!
Finally I made it work without Pause Stop and Start. I just changed the mediaelement.PlaybackRate from 0 to 1 and that seems to work perfectly
Do you use the Windows Store JavaScript or C# language?
If you make a Javascript Windows Store app, you can just use the html player. This got a play, mute and play status.
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>