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.
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'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
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'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
I want to display ads with VAST ad tag and with a HTML5 player. I'm currently trying to use videoJS with Vast Ads Plugin and I'm noticing I can't get the videoJS player to work without having a video content (video element with a src attribute for the video content).
Does anyone know a simple way to use a video player for just ads from VAST, and without video content? Google IMA3 SDK allows that, but I'm now looking for video plugins to cover IE use case (which Google IMA3 SDK does not cover).
Thank you!
There is a dirty way to do this. You can get the ad video url from the plugin that already parsed by it. Then just paste as src to video tag.
If the player you are using support only running pre-roll, that's obviously the best choice. Since that's likely not the case, I would recommend creating a small 1 second long black video MP4 and setting it as the content, with all video controls disabled. This was the lowest friction solution for me, as I didn't need to ask the player anything special of the player. The pre-roll plays, and the user briefly sees black at the end, which may not really be noticed.