How to use webview to play videos on my project

Questions
1

Hi…can somebody explain to me on how to use the webview to play my videos for my project?..can i use it only online(i.e. my videos is uploaded in web) or i can also use it offline(i.e. my vidoes were saved on my device)?..can you give me a sample code on how to use it?(or even a sample project much be better so i can fully understands it)…im sorry for saying this…pls bear with me…Thanks!

1 Like
2

It should work but only on Android / iOS. Are you testing on other targets?

1 Like
3

Yep, the webview component is only available on Android and iOS and it is able to show more or less the same content as the standard webview of the target platform, including video.

If you want to show online video simply point the webview to a webpage containing the video and you’re good to go. You would do this using webview.open().

If you want to show bundled/downloaded video you need consider the following things:

  • The thing with video or other local content is how and from where you serve the content.
  • You cannot use file://your_video.mp4 to reference videos that you have bundle with your app using custom_resources since it would mean that it would look for the video in the application’s local storage (ie where you save files using sys.get_save_file()).
  • If you use file://android_assets/your_video.mp4 it expects to find the video in the assets folder of the APK (you could manually put the video files there and resign the APK I guess).
  • You can copy the video from custom_resources to a location on disk, generate an HTML page at runtime and show the video from there using webview.open_raw()
  • You can also load the video from custom_resources, base64 encode it straight into a run-time generated HTML string and show it using webview.open_raw()
2 Likes
4

@britzl @Pkeod I am trying to understand how web view can work in my test project…i am now trying to display a web view and then opens a website on it when a button clicks…my problem is i didn’t know how to do it…i saw some examples from the forum and manuals and i tried all of it but i always failed and i don’t know where did i go wrong…can you guys help me to fix this one?..coz i’m really confused on how to use it properly…and i am really want to learn it…

this is my current code:
(This code was inside of a gui_script file named home_screen.gui_script, and the script was inside of home_screen.gui)

Its better if you will just correct the current code that i attached below to the working ones…Thanks!

…
local buttonselect

function init(self)
msg.post(".",“acquire_input_focus”)
local webview_id = webview.create(webview_callback)
end

function on_input(self, action_id, action)

if action_id == hash("click") and action.pressed or
   acton_id == hash("touch") and action.pressed then
   
   if gui.pick_node(gui.get_node("buttons1/button_release"),action.x,action.y) then
   gui.set_enabled(gui.get_node("buttons1/button_release"),false)
   gui.set_enabled(gui.get_node("buttons1/button_click"),true)
   buttonselect = "start"
   elseif gui.pick_node(gui.get_node("buttons2/button_release"),action.x,action.y) then
   gui.set_enabled(gui.get_node("buttons2/button_release"),false)
   gui.set_enabled(gui.get_node("buttons2/button_click"),true)
   buttonselect = "instructions"
   end
   
elseif action_id == hash("click") and action.released or
	   acton_id == hash("touch") and action.released then
	   gui.set_enabled(gui.get_node("buttons1/button_release"),true)
   	   gui.set_enabled(gui.get_node("buttons1/button_click"),false)
	   gui.set_enabled(gui.get_node("buttons2/button_release"),true)
   	   gui.set_enabled(gui.get_node("buttons2/button_click"),false)	
   	      
   	   	if buttonselect == "start" then
		msg.post("main:/category#category","enable")
		msg.post("main:/home_screen#home_screen","disable")
		
		elseif buttonselect == "instructions" then
    	local request_id = webview.open(webview_id, "http://www.defold.com", {hidden = true})
		end
   	   
end

function webview_callback(self, webview_id, request_id, type, data)

if type == webview.CALLBACK_RESULT_URL_OK then
    webview.set_visible(webview_id, 1)
    
elseif type == webview.CALLBACK_RESULT_URL_ERROR then
    print("Failed to load url: " .. data["url"])
    print("Error: " .. data["error"])
    
elseif type == webview.CALLBACK_RESULT_EVAL_OK then
    print("Eval ok. Result: " .. data['result'])
    
elseif type == webview.CALLBACK_RESULT_EVAL_ERROR then
    print("Eval not ok. Request # " .. request_id)
    
end

end

end
…

5

I’ll try to provide an example on Monday. You mentioned that it’s not working. What exactly isn’t working? Does the webview open? Do you get an error in the log?

1 Like
6

Thank you very much!..I tried to bundle and run the game on my mobile(android)…
There’s nothing happened…i don’t really know what’s the real problem…so i decided to get
some assistance from you…I hope you can provide some examples so that the other new devs who have
problem like mine will also learn…thanks again!..ill wait for it…

7

I see a couple of issues with the snippet of code you posted above:

  1. You save webview_id in a local variable within the scope of the init() function. You need to save this on self instead and use it in the webview.CALLBACK_RESULT_URL_OK

  2. You declare the webview_callback() function as a global function. Move it above init() and declare it as a local function instead.

BTW: If you want to show video that is bundled with the application then my recommendation is instead to use the videoplayer extension.

2 Likes