How to fullscreen the video in nw fullscreen status? #3153

badnewfish · 2015-03-02T02:49:13Z

package.json :
{"name":"STP","main":"http://192.168.0.94:1078","webkit":{"page-cache":true},"window":{"toolbar":false,"fullscreen": true,"show_in_taskbar":true}}

click the video-playcontrol-fullscreen button,but the nw do the work is not i want;

xueeinstein · 2015-03-03T08:49:19Z

@badnewfish , Can you specify your problem? What kind of video player? HTML5 video or pepper flash which newly supported on nw-v0.12-rc1?

iwege · 2015-03-03T12:33:02Z

maybe you can set the <video / > style to position:absolute;top:0;left:0;width:100%;height:100%

xueeinstein · 2015-03-05T08:01:38Z

video fullscreen is already supported on nwjs-v0.12 which you can download the preview version on buildbot (http://buildbot-master.node-webkit.org:8010/waterfall)

badnewfish · 2015-03-11T05:29:11Z

@xueeinstein :
it is HTML5 video ,
on nwjs-v0.12
the package.json defined the nwjs to fullscreen status,in the nwjs(work in fullscreen status) have a html5 video,in the video-playcontrol have a fullscreen button. the video can play，but click the video-playcontrol-fullscreen button,the video can not fullscreen.
but it can run in googlebrowse
the html code :

xueeinstein · 2015-03-11T07:50:27Z

@badnewfish , It's quite wired! I just paste this link http://www.w3schools.com/html/html5_video.asp into nwjs-v0.12.0-win64 address bar and check fullscreen. It works. I suggest you to work on a clean app and test fullscreen again.

PS: I notice that your video-tag style is in video.js. As you know, video.js may have the power to disable video fullscreen. But I'm not sure. Hope you check it.

Marcuzzz · 2015-03-17T19:24:56Z

I've build a html5 videoplayer which runs fine in chrome but with nwjs it stays black.
Some animated html5 elements do popup. Using: nwjs-v0.12.0-osx-x64

Marcuzzz · 2015-03-17T19:42:28Z

Marcuzzz · 2015-03-17T19:44:01Z

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="http://videoplayer.local/player/media/0.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

xueeinstein · 2015-03-18T02:20:13Z

@Marcuzzz , stay black? I think it's because the video hasn't been loaded. Can you play video on nwjs now?

badnewfish · 2015-03-18T02:33:00Z

@xueeinstein ：i still can not full screen the video in nwjs-v0.12 in this settings：
package.json :
{"name":"STP","main":"http://192.168.0.94:1078","webkit":{"page-cache":true},"window":{"toolbar":false,"fullscreen": true,"show_in_taskbar":true}}
notice that：at first i defined the nwjs run at fullscreen configuration 。
then ，the video can play in the nwjs，when i clicked the fullscreen-button(the button is on the video play control)，the video still play but not do fullscreen action。

In google browse ， i pressed the F11 key ,the browse run at fullscreen status,when i clicked the ullscreen-button(the button is on the video play control)，the video still play and can do fullscreen action。

xueeinstein · 2015-03-18T02:52:19Z

@badnewfish , thanks! It's a reproducible issue. I have checked nwjs-v0.12.0 on both win and osx. For win, the window default fullscreen, but video cannot do fullscreen action. For osx, the window even isn't fullscreen at the beginning! And video fullscreen also doesn't work under this.

@rogerwang , it's a BUG. Under window fullscreen mode, video cannot fullscreen anymore.

badnewfish · 2015-03-18T02:56:38Z

@xueeinstein ,now what can i do ?

xueeinstein · 2015-03-19T07:54:09Z

@badnewfish , this fellow solution may work for you.

Don't set fullscreen: true in package.json. Call document.documentElement.webkitRequestFullScreen(); to make window fullscreen, It's HTML5 fullscreen API, not nw.js API. Then video fullscreen should also work.

Marcuzzz · 2015-03-19T10:20:11Z

Hmmm it's stays black because of type="video/ogg" files
Chrome only needs mp4 files to play in html5 video player.
Why does nwjs need: type="video/ogg" files.

The code below works:
But without video/ogg it doesn't work

 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">

<!DOCTYPE html> 
<html> 
<script>
window.onload = function() {  
  var gui = require('nw.gui');
  gui.Window.get().enterKioskMode();
  gui.Window.get().show();
  var win = gui.Window.get();
  win.show();
}
</script>
<body> 


  <video id="video1" width="100%" autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

</body> 
</html>

xueeinstein · 2015-03-23T04:53:08Z

@Marcuzzz , you're right, I'm also confused why mp4 doesn't work.

Marcuzzz · 2015-03-31T20:33:01Z

Any bright ideas yet?

ghost · 2015-04-01T10:37:13Z

https://github.com/nwjs/nw.js/wiki/Using-MP3-%26-MP4-%28H.264%29-using-the--video--%26--audio--tags.
If link doesn't work try to find "Using MP3 & MP4 (H.264) using the video & audio tags"

Marcuzzz · 2015-04-01T11:40:00Z

The above link doesn't work. But I found the correct page.
http://goo.gl/tCGfN2

thx!

badnewfish · 2015-04-21T09:19:35Z

I have one solution，all the problems are solved：
1、HTML：

<title>Video.js | HTML5 Video Player</title>

<!-- Chang URLs to wherever Video.js files will be hosted -->

<script src="jquery-2.1.3.js"></script>


<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<link href="./video-js/video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="./video-js/video.dev.js"></script>
<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

<video id="example_video_1"  class="video-js vjs-default-skin" controls preload="none" width="320" height="240" controls>
    <source src="v.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
</video>
<!--<input id="show" type="text" value="" />
<input id="cc" type="button" value="cccccccccc" onclick="showMsg()"></input>-->
<script>
    var v = videojs('example_video_1');
</script>

2、In video.dev.js： ![1](https://cloud.githubusercontent.com/assets/10934040/7248909/28604c36-e849-11e4-82bc-c16ca211874c.png) ![2](https://cloud.githubusercontent.com/assets/10934040/7248908/285bdec6-e849-11e4-905b-d77c5ee28698.png) 3、The full demo download address:http://files.cnblogs.com/files/badnewfish/videoTest.rar

but now i get a new problem：
pubulish this videoTest demo on IIS server，win the js run to ” var gui = require('nw.gui');"
the error message is“Uncaught ReferenceError: require is not defined”
how can i do？

iwege · 2015-04-21T09:28:04Z

Maybe you need add your url to node-remote:https://github.com/nwjs/nw.js/wiki/Manifest-format#node-remote

badnewfish · 2015-04-21T09:39:32Z

@iwege eidt the file“package.json”？
i can't follow the context of https://github.com/nwjs/nw.js/wiki/Manifest-format#node-remote

badnewfish · 2015-04-21T09:51:41Z

@iwege
my config：
{
"name": "STP",
"main": "http://localhost:888/test/test.html",
"webkit": {
"page-cache": true
},
"window": {
"toolbar": true,
"fullscreen": true,
"show_in_taskbar": true
}
"node-remote":"http://localhost:888/"
}
but the nj can not work now！

iwege · 2015-04-21T10:22:41Z

@badnewfish try node-remote:"localhost".

badnewfish · 2015-04-23T01:02:17Z

Thanks for you,all the problems are solved, now i will Close issues:
The full demo download address:http://files.cnblogs.com/files/badnewfish/videoTest.rar
If you want run the page at one web server ,must config the package.json like this:
{
"name": "STP",
"main": "http://192.168.0.61:8089",
"webkit": {
"page-cache": true
},
"window": {
"toolbar": false,
"fullscreen": true,
"show_in_taskbar": true
},
"node-remote":"192.168.0.61"
}

badnewfish · 2016-11-18T10:56:29Z

For new versions of nw.js,download the ffmpeg plus here:
https://github.com/iteufel/nwjs-ffmpeg-prebuilt/releases

xueeinstein self-assigned this Mar 3, 2015

badnewfish closed this as completed Apr 21, 2015

badnewfish reopened this Apr 21, 2015

badnewfish closed this as completed Apr 23, 2015

badnewfish unassigned xueeinstein Nov 18, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to fullscreen the video in nw fullscreen status? #3153

How to fullscreen the video in nw fullscreen status? #3153

badnewfish commented Mar 2, 2015

xueeinstein commented Mar 3, 2015

iwege commented Mar 3, 2015

xueeinstein commented Mar 5, 2015

badnewfish commented Mar 11, 2015

xueeinstein commented Mar 11, 2015

Marcuzzz commented Mar 17, 2015

Marcuzzz commented Mar 17, 2015

Marcuzzz commented Mar 17, 2015

xueeinstein commented Mar 18, 2015

badnewfish commented Mar 18, 2015

xueeinstein commented Mar 18, 2015

badnewfish commented Mar 18, 2015

xueeinstein commented Mar 19, 2015

Marcuzzz commented Mar 19, 2015

xueeinstein commented Mar 23, 2015

Marcuzzz commented Mar 31, 2015

ghost commented Apr 1, 2015

Marcuzzz commented Apr 1, 2015

badnewfish commented Apr 21, 2015

iwege commented Apr 21, 2015

badnewfish commented Apr 21, 2015

badnewfish commented Apr 21, 2015

iwege commented Apr 21, 2015

badnewfish commented Apr 23, 2015

badnewfish commented Nov 18, 2016

How to fullscreen the video in nw fullscreen status? #3153

How to fullscreen the video in nw fullscreen status? #3153

Comments

badnewfish commented Mar 2, 2015

xueeinstein commented Mar 3, 2015

iwege commented Mar 3, 2015

xueeinstein commented Mar 5, 2015

badnewfish commented Mar 11, 2015

xueeinstein commented Mar 11, 2015

Marcuzzz commented Mar 17, 2015

Marcuzzz commented Mar 17, 2015

Marcuzzz commented Mar 17, 2015

xueeinstein commented Mar 18, 2015

badnewfish commented Mar 18, 2015

xueeinstein commented Mar 18, 2015

badnewfish commented Mar 18, 2015

xueeinstein commented Mar 19, 2015

Marcuzzz commented Mar 19, 2015

xueeinstein commented Mar 23, 2015

Marcuzzz commented Mar 31, 2015

ghost commented Apr 1, 2015

Marcuzzz commented Apr 1, 2015

badnewfish commented Apr 21, 2015

iwege commented Apr 21, 2015

badnewfish commented Apr 21, 2015

badnewfish commented Apr 21, 2015

iwege commented Apr 21, 2015

badnewfish commented Apr 23, 2015

badnewfish commented Nov 18, 2016