View Video on Mobile

  • 1
  • 1
  • Question
  • Updated 5 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
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,964 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,964 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,964 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.