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.
Related
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 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.
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 planning to build a system to broadcast public events (trials, meetings, conferences).
A key request will be the insertion of live subtitles to the A/V stream.
The subtitles will be "live" since they will be produced by an operator while the event will happen.
I suppose the HTML5 "track" element is not yet implemented by any of the major browsers, but: can I expect to eventually use it for live subtitles? Will I be able to inject the subtitle to the page while the stream is playing?
Please Look at the following links. Looking at the link i am having to believe it should be possible as they are using Js to show subtitles
http://www.storiesinflight.com/js_videosub/
http://cuepoint.org/
You may also consider http://mozillapopcorn.org/ which is to show content on timing of the video. So technically u can use this with ajax to show/stream subtitles
There are HTML5 video JS libs that support subtitles (eg: VideoJS supports the .srt format, there are several easily Google-able others), however to the best of my knowledge none of them support streaming subtitles.
I think you may have to build your own solution for this. If I were to do it, I'd probably try doing something with Socket.IO's broadcast functionality that can push data out to all connected clients at once, and have your client-side JS listen for new subtitle events and render them on screen as they come in. You can use plain ol' CSS to overlay the text over the HTML5 video.
The problem is, my videos are hosted on a video site, longer videos will be divided into several parts. I want to play these clips in html5 video tag on my own site, is it possible to play media resources listed in source tags sequentially?
I googled and got to the w3c's html5 video spec page, find an attribute named startOffsetTime, I tried to assign value for this attribute to each media resource as suggested in the spec, but it still doesn't work.
You can load the next clip when JavaScript's onend event is triggered.
Check out markcial's answer in another thread.