video.js direkt használat
authorVásáry Dániel <daniel.vasary@userrendszerhaz.hu>
Mon, 15 Jul 2019 10:09:31 +0000 (10:09 +0000)
committerVásáry Dániel <daniel.vasary@userrendszerhaz.hu>
Mon, 15 Jul 2019 10:09:31 +0000 (10:09 +0000)
git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube;C31458

server/user.jobengine.osgi.server/pages/searchitems.zul
server/user.jobengine.osgi.server/src/user/jobengine/zk/model/SearchModel.java

index 2c6beaedc45f923530c5f50bdd4f91f71b71caa3..e2be465365e3a1e3199a5ffaa4c4f2fe45c51349 100644 (file)
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>\r
 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>\r
-<?script type="text/javascript" src="/js/videojs-ie8.min.js"?>\r
-<?script type="text/javascript" src="/js/video.js"?>\r
 <?init class="user.jobengine.zk.util.AuthInitiator"?>\r
 \r
-<zk xmlns:w="http://www.zkoss.org/2005/zk/client">\r
+<zk xmlns:w="http://www.zkoss.org/2005/zk/client" xmlns:h="xhtml">\r
+       <style src="/css/video-js.css" />\r
+       <h:script src="/js/videojs-ie8.min.js"  />\r
+       <h:script src="/js/video.js"  />\r
        <script type="text/javascript">\r
                function clearSelection () {\r
                        if(window.getSelection) {\r
                        }\r
                }\r
        </script>\r
+\r
+       <h:script type="text/javascript" defer="true">\r
+               var player = videojs('myVideoDiv', {\r
+                       controls : true,\r
+                       preload : "auto"\r
+               });\r
+               player.on('ended', function() {\r
+                       this.dispose();\r
+                       console.log("ended", "Player disposed");\r
+               });\r
+               \r
+               function setSource(src) {\r
+                       console.log("setSource", player, src);\r
+                       player.src({type: 'video/mp4', src: src});\r
+               }       \r
+               \r
+               function pushTcIn() {\r
+                       var current = player.currentTime();\r
+                       console.log("pushTcIn", current);\r
+                       zk.Widget.$('$videoListener').fire('onTcIn', current, {toServer:true});\r
+               }       \r
+       </h:script>\r
+\r
        <!-- csak igy jo a list sebessege -->\r
        <custom-attributes org.zkoss.zul.listbox.rod="true" />\r
        <!--    <custom-attributes org.zkoss.zul.listbox.initRodSize="50" /> -->\r
     align-content: space-around; } .menuButtons\r
                >button{ width:200px; } .z-messagebox-window{ top:40% !important; width:30% !important; } .z-toolbar-start{ width:100%; }\r
 \r
+\r
+       .myVideoDiv-dimensions {\r
+               width: 100%;\r
+               height: 100%;\r
+       }\r
+       \r
+       .vjs-error {\r
+               width: 100%;\r
+               height: 100%;\r
+       }\r
+       .vjs-modal-dialog-content {\r
+               width: 100%;\r
+               height: 100%;\r
+               display: none;\r
+       }\r
+       \r
+       .vjs-no-js {\r
+               width: 100%;\r
+               height: 100%;\r
+       }\r
        </style>\r
        <div id="scdiv" width="100%" height="100%" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('user.jobengine.zk.model.SearchModel')">\r
                <timer id="timer" delay="1" repeats="false" onTimer="@command('uiTick')" />\r
                                <borderlayout height="100%" width="100%">\r
                                        <north border="none" size="60%" splittable="true" minsize="250" collapsible="true">\r
                                                <div align="center" height="100%" width="100%">\r
-                                                       <iframe id="mediaPlayer" height="100%" width="100%" autohide="false" src="@load(vm.lowresMediaFilePath)"></iframe>\r
+                                                       <h:video id="myVideoDiv" class="video-js vjs-default-skin vjs-big-play-centered" poster="/img/mediacube_logo_v2_50x50.png">\r
+                                                       </h:video>\r
+                                                       <div id="videoListener" onTcIn="@command('onTcIn')" />\r
+                                                       \r
+                                                       \r
+<!--                                                   <iframe id="mediaPlayer" height="100%" width="100%" autohide="false" src="@load(vm.lowresMediaFilePath)"></iframe> -->\r
                                                </div>\r
                                        </north>\r
                                        <center border="none">\r
                                                                                disabled="@load(not sessionScope.userPrincipal.editor or sessionScope.userPrincipal.anonymous or vm.selectedObject eq null)" label="Megosztás" />\r
                                                                        <toolbarbutton image="/img/baseline_edit_black_18dp.png" autodisable="self" onClick="@command('openMetaDataDialog')"\r
                                                                                disabled="@load(not sessionScope.userPrincipal.editor or sessionScope.userPrincipal.anonymous or vm.selectedObject eq null)" label="Szerkesztés" />\r
+                                                                       <toolbarbutton autodisable="self" onClick="pushTcIn()" label="IN" />\r
                                                                </div>\r
                                                                </div>\r
                                                        </toolbar>\r
index 238d533d906507ff8eae851e409abf8e8fbeadaf..94bba688d01e59050f2c7e8917397780d58b37d0 100644 (file)
@@ -272,7 +272,6 @@ public class SearchModel extends AsyncBaseModel {
                        }\r
 \r
                        SessionUtil.putUserSearchFilter(searchFilters);\r
-\r
                } catch (Exception e) {\r
                        Messagebox.show(e.getMessage(), "Hiba", Messagebox.OK, Messagebox.ERROR);\r
                        logger.catching(e);\r
@@ -361,7 +360,7 @@ public class SearchModel extends AsyncBaseModel {
        }\r
 \r
        public String getLowresMediaFilePath() throws Exception {\r
-               String ret = PAGES_MEDIAPLAYER;\r
+               String ret = null;\r
                if (selectedObject != null) {\r
                        List<MediaFile> mediaFiles = selectedObject.getMedia().getMediaFiles();\r
                        if (mediaFiles != null) {\r
@@ -371,14 +370,12 @@ public class SearchModel extends AsyncBaseModel {
                                                StoreUri sourceStoreUri = store.getSourceStoreUri(RemoteStoreProtocol.HTTP);\r
                                                URL base = new URL(sourceStoreUri.toString());\r
                                                String relative = mf.getRelativePath().replace("\\", "/");\r
-                                               ret += new URL(base, relative).toString();\r
+                                               ret = new URL(base, relative).toString();\r
                                                break;\r
                                        }\r
                                }\r
                        }\r
                }\r
-               if (PAGES_MEDIAPLAYER.equals(ret))\r
-                       ret += "&poster=/img/mediacube_logo_v2_50x50.png";\r
                return ret;\r
        }\r
 \r
@@ -506,6 +503,11 @@ public class SearchModel extends AsyncBaseModel {
                logger.info("onPaging");\r
        }\r
 \r
+       @Command\r
+       public void onTcIn(@ContextParam(ContextType.TRIGGER_EVENT) Event event) {\r
+               //event.getData() a tcin\r
+       }\r
+\r
        @Command\r
        public void onWestResize(@BindingParam("west") West _west) {\r
                _west.invalidate();\r
@@ -614,6 +616,17 @@ public class SearchModel extends AsyncBaseModel {
                if (selectedObject != null) {\r
                        selectedObject.setMedia(itemManager.getMedia(selectedObject.getMedia().getId()));\r
                        selectedObject.setItem(itemManager.getItem(selectedObject.getMedia().getItemId()));\r
+\r
+                       try {\r
+                               String video = getLowresMediaFilePath();\r
+                               Clients.evalJavaScript("setSource('" + video + "')");\r
+\r
+                               //ret += "&poster=/img/mediacube_logo_v2_50x50.png";\r
+\r
+                       } catch (Exception e) {\r
+                               logger.error(e);\r
+                       }\r
+\r
                }\r
        }\r
 \r