Ok this has me wondering what have I done, either reactjs/nodejs is turning my perfect html5 app into a flash app.
without my knowledge or Opera GX thinks it needs to play audio files through a flash plugin.
It is basically stopping autoplay due to the fact that users need to allow flash before the audio will play (unless they click the play button)
Can someone please explain to me why or how this is. and what I can do to correct this?
to clarify my audio tag is
<audio id="player" autoPlay>
<source src="StartOfTrevda.mp3"
type="audio/mpeg"
/>
</audio>
Related
When I uploaded my mp4 to my Amazon S3 Bucket I allowed public access through my permissions. The mp4 loads perfectly fine in my pc browser, but when I try to pull it up on my iphone it does not seem to be reading the S3 object correctly.
The object url is: https://numeros1422.s3.amazonaws.com/Black+on+white.mp4
That url pulls up a video on pc but has issues when pulling up on iphone.
Thanks for the help in advance!
Amazon S3 serves the content of the object the same regardless of which browser is used.
However, how the mp4 file is interpreted will depend upon the browser being used. Some browsers might choose to display it, some might choose to download it. It might also be a factor of the memory available on the particular device.
Typically, mp4 files are not served simply as a web page. Instead, they are referenced in the HTML.
Here's an example from w3schools - HTML Video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
This tells the browser to display a video within an HTML page.
I am trying to embed an MP4 into a Grafana dashboard on an Ubuntu 18.04 server. I have entered this into the "text" dashboard in HTML mode.
<video width="320" height="240" controls autoplay loop>
<source src="/home/testing/Downloads/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
This shows the controls but does not show the video. When I put the same code in an html page on its own, however, the video shows as expected.
I have also placed a video in /var/www/html but this fails to show too.
What am I doing wrong here?
As mentioned in comments the correct way to do this would be to move the video into the grafana public folder and serve it from there.
On the grafana server, move the video to /usr/share/grafana/public/video , you will have to create this folder first (owned by root and perms 755)
Then within the panel, your html would simply be
<video width="320" height="240" controls autoplay loop>
<source src="/public/video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
All script type tags were disabled in a previous version of Grafana for security purposes. To enable them, un-comment this line in /etc/grafana/grafana.ini - it's near the bottom.
;disable_sanitize_html = false
Then set it to true
disable_sanitize_html = true
Worth bearing in mind that this could be a significant security risk. Do so at your own risk.
This will enable the video tag as well as iframe, so you will also be able to embed YouTube videos. Unfortunately, I have not been successful in getting either local or YouTube video to loop, so YouTube live streams seem to be the best bet. I currently have a Grafana dashboard playing Sky News, for example.
As #tomgalpin has noted, you can put a video file in /usr/share/grafana/public/video so that Grafana can serve it. I'd stick with YouTube if possible though.
In a panel plugin, put your mp4 in src/img/ and use this in your ReactJs component:
<video src="/public/plugins/your-plugin-name/img/sample-mp4-file.mp4" width="320" height="240" controls loop></video>
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."
I am trying to build a web application that lists videos. I have a problem with internet explorer.
Here is my view
<div class="col-lg-3 col-xs-12 col-md-6" ng-repeat="video in videos track by $index">
<video>
<source ng-src="{{video.url}}" type="video/mp4">
</video>
</div>
I am lazy loading videos on controller side. Each scroll bottom adds 4 new elements to videos.
videoFactory.load($scope.videos.length, 4).then(function(res){
$scope.videos = $scope.videos.concat(res.data.data);
});
And everything works fine on all browsers except internet explorer 9 to Edge.
Please look at Internet Explorer network. Everything was fine but suddenly all response headers changed to 206. Video with the name "iPhone_7" was loaded before with the size of 7,04MB but now it is partially loaded with 6,77MB.
This problems starts after 32 videos are loaded succesfully. And the video error code is 4 which is MEDIA_ERR_SRC_NOT_SUPPORTED.
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.