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>
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 have a web frontend that's able to obtain a MediaStream from a remote RTCPeerConnection.
Once I get this stream, I pass it to a <video> tag with autoPlay set.
(Note: the frontend is in React, so we pass the stream as an srcObject with a ref.)
Everything works fine in Firefox.
In Chrome, the video is only displayed if I do this at application startup:
call navigator.mediaDevices.getUserMedia({ ... }) with either audio or video set to true
take the MediaStream returned by getUserMedia, and keep it in a global or top-level variable
Now, that does not make any sense to me since:
I don't want to ask users for permission to access their microphone or webcam in order to display a video
This only happens in Chrome, and Firefox works fine
This happens both on localhost and https:// "public" domains, so it's probably not a security issue
This does not seem to be affected by playing with the autoPlay, controls, etc... attributes of the <video> tag.
Anything obvious I'm missing here ?
Chrome introduced autoplay restrictions in 2018. These are not in effect when getUserMedia is active.
If your application logic works when Chrome is started with --autoplay-policy=no-user-gesture-required this suggests this is the case. The article also has some background information and possible workarounds like introducing a user gesture.
(and no, these restrictions don't make sense...)
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>
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.