View Video on Mobile

  • 1
  • 1
  • Question
  • Updated 7 days ago
  • Answered
I've uploaded a video as a file attachment and put the file's URL as a button on the dashboard.

The video downloads fine from the desktop site, but won't in Mobile view.

Is this feature not available for mobile? 

Thanks!
Photo of Heather Bryant

Heather Bryant

  • 1,128 Points 1k badge 2x thumb

Posted 1 year ago

  • 1
  • 1
Photo of Charlie

Charlie

  • 502 Points 500 badge 2x thumb
Hi Heather,

I've tried to actually embed a playable video on dashboards, using the web page widget and some simple HTML 5 markup. It works great on the desktop but for mobile you will be presented with a URL like my first screenshot below. However, upon clicking this link from mobile, you will be directed to a page where you can play/download the video. Would that work? HTML code below as well.

1) put the below code in a code page in QB--replacing my URL in quotes (src="....") with your video's URL. Call it something like "videoembed.html"

2) display videoembed.html page in a website widget in a dashboard page (copy the URL from the page preview and paste that into the web widget)

Let me know if you have any questions!

Charlie

Code page snippet:

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="https://mcftech.quickbase.com/up/....."; type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</body> 
</html>

----------------------------------------------------------

Mobile 1: 


Mobile 2 (you can play directly in your mobile browser + download to your device via the button in the bottom right corner): 

(Edited)
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
If you use :

<video width="100%" controls>

instead, the video will automatically size to the container so it will fill the screen whether it is desktop or mobile.
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
Hey Charlie, this is exactly what I'm looking for... My issue is that I'm having trouble with the notation for the source link... any insight would be greatly appreciated. I keep getting invalid link.
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
What do you mean specifically by "having trouble"? Would help to post your code.
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
My source link keeps stating invalid, or doesn't load when used as the source of a video html tag...

The link I've been trying to work is something like:

https://<realm>.quickbase.com/up/<dbid>/a/r/<record ID>/e<FieldID of Video File Attachment>/v0

but when I try to access this directly, I get a page stating invalid link
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
I fixed the issue of invalid link, I had a / in between r and the record ID...

I'm still having the issue that this URL isn't playing when used as a source for a video tag.
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
Update***

I was able to figure out my issue... correct link format is:

https://<realm>.quickbase.com/up/<dbid>/g/rd/eg/va/<filename>.mp4";
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
Glad it is working for you now. For future reference, if you already have the video as an attachment in a record, you can right click the hyperlink and copy the url:



I often add a table for media in my apps and use it ti store images and videos for instructions, logos, etc...

When you copy the link address, you don't have to worry about the typos.
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
This didn't entirely work... as the notation only worked for my one test video...

My overall goal was to get this dynamically so the user experience is to just click on a button and the video will play...

Using JavaScript I get the structured format of the record, which will have the URL for the video... that video is what I add to the video tag source.
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
What is not working as you expect it to? Can you show what code you are using and then show what is the result?
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
When I thought I had my notation correct, it would only point to one video, even if I changed the video name...

the API to get my structured format is:

https://<realm>.quickbase.com/db/<dbid>?a=API_doQuery&query={'3'.EX.'3'}&fmt=structured
.....



My main code to get the File's URL is as follows (part of a button click even):


$("a.Launch").on('click', function(event) {
var rid = this.dataset.rid;

var parser = document.createElement('a');
        parser.href = window.location.href;
    var realmHost = parser.hostname;

var url = "https://"+parser.hostname+parser.pathname+"?a=API_doQuery&query={'3'.EX.'"+rid+&q...;

var Request = new XMLHttpRequest();
Request.open("GET",url,true);
Request.onload = function(){
console.log(Request.responseXML);
var file =  (Request.responseXML.documentElement.getElementsByTagName("url"))[0].innerHTML;


I know that the XMLHhttpRequest is older notation... but it's functional.

After this I take the URL and place into a html string to add to the body and continue with the process


Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
What exactly are you trying to do; I do not follow?

In the first example from Charlie above, a code page was used to display a video as a webpage widget on a dashboard. Is this what you want to do?
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
Kind of...

I have this working where I have a button on a form, and when the button is clicked it brings up an embedded video that is on the same record as the button.

using a code page
(Edited)
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
Will the user be watching the same video regardless of which record is being edited?
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
Sorry, just sort of realized I hijacked this thread...

My case is the video file attachment is on the same record as the corresponding button...

The button sends the record ID, which is how the code knows which video file to get.
Photo of Adam Keever

Adam Keever

  • 1,934 Points 1k badge 2x thumb
Is it the same video for each record?
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb
No, the table in question is a table of videos.
Photo of Ryan Stanford

Ryan Stanford

  • 1,692 Points 1k badge 2x thumb


Screen shot of my test table... each button in the column will open the file in the same row/record.

Photo of Adam Keever

Adam Keever

  • 1,984 Points 1k badge 2x thumb
You can use the iframe technique from the magic buttons app.

create a formula rich text field, [iframe], and give it the following code:
"<video src = " & URLRoot() &"up/"& Dbid() &"/a/r"& [Record ID#]&"/e9/v0\" width=\"500\" controls>\n</video>"

rename the [attachment] field to whatever yours is named.

create a report link field, [link], and set the field relationship as follows:


In my example the app name is QB Developer Resources and the table name is Tests; set the relationship to match your app and table name.

Next add the link field to your form and it will display the video and the user can play the video on the form.




Photo of Adam Keever

Adam Keever

  • 1,984 Points 1k badge 2x thumb
This function also works for your table views (here both videos were playing simultaneously):
Photo of Adam Keever

Adam Keever

  • 1,984 Points 1k badge 2x thumb
Need to make note that in the iframe code:
"<video src = " & URLRoot() &"up/"& Dbid() &"/a/r"& [Record ID#]&"/e9/v0\" width=\"500\" controls>\n</video>"

substitute the 9 in 'e9' for the field ID# of your attachment field.