I'm playing a video in ReactPlayer that generates an HTML5 video in a <video> tag. It's not working on mobile (tested on Safari, Chrome, and Firefox on iPhone 8 iOS 13.5.1)
I saw this question which let me know to disable autoplay and add playsinline for mobile, but it's still not working for me. The file I'm pulling, if it's relevant, is hosted on Google Cloud Storage
<div id="ReactPlayer" style="margin: auto; border-radius: 10px; min-height: 360px; min-width: 640px; display: block; width: 80%; height: 80%;">
<video src="link_to_my_video" preload="auto" controls="" playsinline="" webkit-playsinline="" x5-playsinline="" style="width: 100%; height: 100%;">
</video>
</div>
Does anyone know how to make it play on mobile? Thanks
EDIT
If helpful my links look like
"https://firebasestorage.googleapis.com/v0/b/my-mvp.appspot.com/o/videos%sub-folder?alt=media&token=my_token"
and the video it's pulling in is a .webm file
For me, what worked was recording the video using mp4 instead of webm. This opens the issue of Chrome only being able to record using the webm MIME type, so you're essentially choosing between recording on Chrome, and Viewing on mobile devices. I don't have a clear answer on making video universal across all browsers
I will leave this question open in the hopes that someone can come up with a better solution
Related
I have a Site that have(/will have) all my things on internet.
I'm doing the Works page that will contain all my projects (they already are on the site but not yet indexed, such as Aquarium)
My questions is:
Anyway to make a page preview for my Projects without having to take screenshot of the every page? (I already look into google and found nothing)
What i want to do is like this(done in figma):
(https://i.stack.imgur.com/B4ijk.png)
*edit 1: iframe is to hard to control, i wanna to transform this in a link and iframe simple dont work with it
Works fine for me
iframe {
display: block;
pointer-events: none;
}
<a href="https://example.com/">
<iframe src="https://example.com/"></iframe>
</a>
I have this CSS in a Razor Page project:
body {
background: url('../images/graphics/myimage.jpeg') no-repeat center center fixed;
padding-bottom: 20px;
}
The main body tag and link to the style sheet are in _Layout.cshtml.
The background image works fine everywhere except for pages other than index.cshtml in the mobile version of MS Edge browser; it works just fine in Chrome mobile. Works fine in all desktop browsers too.
I've only tested on Android.
According to your description, I come to the following conclusions:
Try restarting your Edge mobile and cleaning up its cache.
Check whether the image cache settings of Edge are limited;
Perhaps the Edge mobile belongs to the third-party software on your phone, so its speed is slightly slower. In addition, its compatibility with your phone's operating system affects the page rendering process.You could try different models of mobile phones to test.
For more:this link.
If the background image still cannot be loaded in edge mobile, hopefully you could provide information about the more code or settings that is related to browser loading.
I have this code and I embed a Youtube playlist to my website
<iframe width="300" height="165"
src="PLAYLIST_URL?autoplay=1&showinfo=0&loop=1&list=PLAYLIST_ID&rel=0"
frameborder="0" allowfullscreen></iframe>
This works in desktop and it auto play and loop. But I can only listen one track in mobile and does not auto play (iPhone 4S, iOS 7).
This is my webpage : www.hqtunes.com
How can I fix the embed code and can auto play and loop, like on desktop?
Based this thread, autoplay cannot be done on iOS and Android devices. For various reasons (including, but not limited to data usage), Apple doesn't allow auto-playing of videos. You may also check this documentation which stated that "Warning: To prevent unwanted downloads on mobile networks at the user's expense, playback of embedded media can not be launched automatically in Safari for iOS, and only the user can start playback."
Spent a few hours today trying to figure this out, hoping someone can enlighten me. I have a video hosted in Azure Media Services that I am calling a Web Service to get (using WebApi and Angular). The issue I am running into is that the video is not actually playing. Here is the View code in Angular I am using
<video id="{{video.RowKey }}" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}'>
<source src="{{vm.trustSrc(video.BlobUri)}}" type="application/dash+xml" />
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
And for completeness, this is what vm.trustSrc does
vm.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
The Html rendered looks like this
<video id="a273bf71-4b1f-439a-8f98-31d112511d8f" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls="" data-setup="{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}">
<source src="https://testams.streaming.mediaservices.windows.net/6236bb64-cda4-4a05-960c-ae957729cf61/testvideo.ism/manifest(format=mpd-time-csf)" type="application/dash+xml">
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
I have tried a few different types (including application/vnd.ms-sstr+xml) and none of them play the video. I know this works but in my situation I cannot get it to work. I have looked through every tutorial and sample code I have came across and nothing seems to get me where I want. Any help would be greatly appreciated.
I use a piwik installation on /site.xy/piwik to track 2 sites (site.xy and othersite.xy)
Is it possible to have different independet opt-out iframes for each domain? Currently it seems, when I opt-out on the first site, the setting is changed on the other, too.
<iframe style="border: 0; height: 200px; width: 600px;" src="https://site.xy/piwik/index.php?module=CoreAdminHome&action=optOut&language=de"></iframe>
No, it's not possible currently. Please see https://github.com/piwik/piwik/issues/6505