# aardio 范例: web.view( WebView2 浏览器控件) - 视频 / 全屏



```aardio
//web.view( WebView2 浏览器控件) - 视频 / 全屏
import web.view; 
import wsock.tcp.asyncHttpServer;
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2(web.view) 播放视频并支持全屏";right=1008;bottom=616)
winform.add()
/*}}*/

var httpServer = wsock.tcp.asyncHttpServer(); 
httpServer.run( {
	["/index.html"] = /**
<html>
<head>
    <style type="text/css">
        html,body { height: 100%; width: 100%; margin: 0;overflow: hidden; }
    </style>
    
    <!--第一步：引入下面2个文件加载播放器 -->
    <link href="https://lib.baomitu.com/video.js/7.15.0/video-js.min.css" rel="stylesheet">
    <script src="https://lib.baomitu.com/video.js/7.15.0/video.min.js"></script>
</head>
<body>

	<!-- 第二步：插入视频文件 -->
    <video id="my-player" class="video-js" controls preload="auto" poster="https://vjs.zencdn.net/v/oceans.png"
        style="width:100%;height:100%" data-setup='{}'>
        <source src="http://download.aardio.com/demo/video.aardio?f=sintel" type=" video/mp4"> 
        <track kind='captions' src="/sintel.vtt" label="English"  default >
    </video>

    <script>
    
		//第三步：修改播放器选项,这一步可以省略
        videojs("my-player", {
            controlBar: {
                fullscreenToggle: true
            }
        });
    </script>
</body></html>
**/;
	["/sintel.vtt"] = /**
WEBVTT

0
00:00:11.400 --> 00:00:14.800
What brings you to the land of the gatekeepers?

1
00:00:18.000 --> 00:00:20.500
I'm searching for someone.

2
00:00:36.850 --> 00:00:39.750
A dangerous quest for a lone hunter.

3
00:00:40.950 --> 00:00:44.870
I've been alone for as long as I can remember.
**/;
}); 

var wb = web.view( winform );

//允许网页全屏
wb.onFullScreen = lambda(enabled) owner.fullscreen(enabled);
/*
注意：创建有边框的窗口但在之后修改为无边框（或由 win.ui.simpleWindow 自动修改）则全屏可能会失效。
*/

wb.go( httpServer.getUrl("index.html") );

winform.show(); 

win.loopMessage();
```

