Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
start [2021/10/22 01:21]
admin 		start [2021/10/27 11:06] (current)
admin
Line 1: Line 1:
-OnePlayer Online - The unified media player, A Free Web Software for playing video、panorama、3dmodel etc.+OnePlayer Online - The unified media player, A Free Web Software for playing video、panorama、3D Model etc.
  
 <HTML> <HTML>
Line 7: Line 7:
 </u-oneplayer> </u-oneplayer>
 </div> </div>
-<script type="text/javascript" src="/lib/tpl/skydoku/assets/oneplayer/utilhub-tookits-oneplayer-std.js"></script> 
 <script id="tpl-oneplayer-picker" charset="UTF-8" type="text/html"> <script id="tpl-oneplayer-picker" charset="UTF-8" type="text/html">
          
Line 36: Line 35:
       <p>Drag file here</p>       <p>Drag file here</p>
     </div>     </div>
-    <button class="upload-btn"> +    <div class="btn-area"> 
-      <i class="fa fa-upload fa-2x" aria-hidden="true">open</i> +      <button class="upload-btn"> 
-    </button>+        <i class="fa fa-upload fa-2x">open</i> 
 +      </button> 
 +    </div>
     <div class="file_tips">     <div class="file_tips">
     <p> The opened file is only read into the browser.<br> We do not store or see your file data.</p>     <p> The opened file is only read into the browser.<br> We do not store or see your file data.</p>
Line 48: Line 49:
 <script id="tpl-oneplayer-picker-url" charset="UTF-8" type="text/html"> <script id="tpl-oneplayer-picker-url" charset="UTF-8" type="text/html">
   <div class = "urlloader">   <div class = "urlloader">
-    <input type="text" class="archive-url" placeholder="Input url here. if external servers,this url must have CORS enabled." /> +    <div class="inputzone"> 
-    <button class="load-btn"> +      <input type="text" class="archive-url" placeholder="Input url here. if external servers,this url must have CORS enabled." /> 
-      <i class="fa fa-cloud-download fa-2x" aria-hidden="true">load</i> +    </div> 
-    </button>+    <div class="btn-area"> 
 +      <button class="load-btn"> 
 +        <i class="fa fa-cloud-download fa-2x">load</i> 
 +      </button> 
 +    </div>
     <div class="file_tips">     <div class="file_tips">
     <p> The loaded file is only read into the browser.<br> We do not store or see your file data.</p>     <p> The loaded file is only read into the browser.<br> We do not store or see your file data.</p>
Line 58: Line 63:
 </script> </script>
  
 +<script id="tpl-oneplayer-picker-listing" charset="UTF-8" type="text/html">
 +  <div class="lark-carousel rotate" >
 +    <div  class="items-container" >
 +      <ul class= "items" >
 +        <!-- Add your images (or video) here -->
 +      </ul>
 +      <!-- Text at center of ground -->
 +      <p class = "desc">3dMAX  Rotate  Carousel</p>
 +      <div id="ground" class="ground" style="width: 720px; height: 720px;"></div>
 +    </div>
 +    <a class="prev">‹</a>
 +    <a class="next">›</a>
 +    <a class="cycle-stop"></a>
 +    <ol class="indicators">
 +    </ol>
 +  </div>        
 +</script>
  
-<script> +<script id="tpl-oneplayer-picker-listing-modes" charset="UTF-8" type="text/html"> 
-    $(function() { +  <li class="pull-right"> 
-      require([ +    <div class="btn-group carousel-modes" data-toggle="buttons"> 
-        "skylark-langx", +      <label class="btn btn-default"> 
-        "skylark-domx", +        <input name="carsoulMode" type="radio" value="slide"><span class="fa fa-exchange"></span> 
-        "utilhub-tookits-oneplayer" +      </label> 
-      ],function(langx,domx,oneplayer) { +      <label class="btn btn-default"> 
-        initPage(langx,domx,oneplayer); +        <input name="carsoulMode" type="radio" value="rotate"><span class="fa fa-houzz"></span> 
-       }); +      </label> 
-    });+      <label class="btn btn-default"> 
 +        <input name="carsoulMode" type="radio" value="coverflow"><span class="fa fa-gg"></span> 
 +      </label> 
 +    </div> 
 +  </li>     
 +</script>
  
 +<script id="tpl-oneplayer-picker-listing-item" charset="UTF-8" type="text/html">
 +  <li class="item"  data-media="<%= media %>" >
 +    <div class="content"><img src="<%= poster %>"></div>
 +  </li>  
 +</script>
 +
 +<script>
     function initPage(langx,domx,oneplayer) {     function initPage(langx,domx,oneplayer) {
         let $ = domx.query;         let $ = domx.query;
  
-        let _windowLoaded = false;+      var medias = [ 
 +          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/diagramjhg.jpeg", 
 +            media : "/medias/enterprise/demos/diagramjhg.jpegp",  
 +            title : "diagramjhg" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : '/medias/enterprise/demos/flyingcar.jpg', 
 +            media : "/medias/enterprise/demos/flyingcar.obj.zip",  
 +            title : "flyingcar" 
 +          }, 
 +          { 
 +            type: 'image', 
 +            poster : '/medias/enterprise/demos/gosthouse.jpg', 
 +            media : "/medias/enterprise/demos/gosthouse.obj.zip",  
 +            title : "gosthouse" 
 +          }, 
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/grand-view-park-sf.jpeg", 
 +            media : "/medias/enterprise/demos/grand-view-park-sf.jpegp",  
 +            title : "grand view park"
  
-        const autoSetup = function () {+          },
  
-            const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));+          { 
 +            type: 'image', 
 +            poster : "/medias/enterprise/demos/primaryiondrive.jpg", 
 +            media : "/medias/enterprise/demos/primaryiondrive.glb.zip",  
 +            title : "PrimaryIon Drive" 
 +          }, 
 +           
 +          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/sam010.jpg", 
 +            media : "/medias/enterprise/demos/sam019.mp4",  
 +            title : "sam"
  
-            if (mediaEls && mediaEls.length > 0) { +          },        
-                for (let i = 0, e = mediaEls.length; i < e; i++) {+          { 
 +           type: 'image', 
 +            poster : "/medias/enterprise/demos/the-earth-around.png", 
 +            media : "/medias/enterprise/demos/the-earth-around.mp4p",  
 +            title : "the earth around"
  
-                    const mediaEl = mediaEls[i], +          }        
-                          pickerOptions = { +      ];
-                            tabs : [ +
-                              {label:"Local",from:"upload"}, +
-                              {label:"Internet",from:"url"} +
-                            ],+
  
-                            template : $("#tpl-oneplayer-picker").html(),+        const mediaEls = Array.prototype.slice.call(document.getElementsByTagName('u-oneplayer'));
  
-                            templates : { +        if (mediaEls && mediaEls.length > 0) { 
-                              tabitem : $("#tpl-oneplayer-tabitem").html(), +            for (let i = 0, e = mediaEls.length; i < e; i++) { 
-                              tabpane : $("#tpl-oneplayer-tabpane").html()+ 
 +                const mediaEl = mediaEls[i], 
 +                      pickerOptions = { 
 +                        tabs : [ 
 +                          {label:"Local",from:"upload"}, 
 +                          {label:"Internet",from:"url"}, 
 +                          {label:"Samples",from:"listing",items:medias,modes:true} 
 +                        ], 
 + 
 +                        template : $("#tpl-oneplayer-picker").html(), 
 + 
 +                        templates : { 
 +                          tabitem : $("#tpl-oneplayer-tabitem").html(), 
 +                          tabpane : $("#tpl-oneplayer-tabpane").html() 
 +                        }, 
 + 
 +                        froms : { 
 +                          upload : { 
 +                            template : $("#tpl-oneplayer-picker-upload").html() 
 +                          }, 
 +                          url : { 
 +                            template : $("#tpl-oneplayer-picker-url").html() 
 +                          }, 
 +                          listing : { 
 +                            template : $("#tpl-oneplayer-picker-listing").html(), 
 + 
 +                            item : { 
 +                              template : $("#tpl-oneplayer-picker-listing-item").html()
                             },                             },
  
-                            froms : { +                            modes : { 
-                              upload : { +                              template : $("#tpl-oneplayer-picker-listing-modes").html()
-                                template : $("#tpl-oneplayer-picker-upload").html() +
-                              }, +
-                              url : { +
-                                template : $("#tpl-oneplayer-picker-url").html() +
-                              }+
                             }                             }
-                          }; +                          }
- +
-                    if (mediaEl && mediaEl.getAttribute) { +
-                        if (mediaEl.player === undefined) { +
-                           let player = new oneplayer.Player(mediaEl,{ +
-                             autoplay : true, +
-                             picker : pickerOptions +
-                           });+
                         }                         }
-                    } else { +                      }; 
-                        autoSetupTimeout(1); + 
-                        break;+                if (mediaEl && mediaEl.getAttribute) { 
 +                    if (mediaEl.player === undefined) { 
 +                       let player = new oneplayer.Player(mediaEl,{ 
 +                         autoplay : true, 
 +                         picker : pickerOptions 
 +                       });
                     }                     }
 +                } else {
 +                    autoSetupTimeout(1);
 +                    break;
                 }                 }
-            } else if (!_windowLoaded) { 
-                autoSetupTimeout(1); 
             }             }
-        }; +        } 
-        function autoSetupTimeout(wait) { +
- +
-            window.setTimeout(autoSetup, wait); +
-        } +
-        function setWindowLoaded() { +
-            _windowLoaded = true; +
-            window.removeEventListener('load', setWindowLoaded); +
-        } +
-        if (document.readyState === 'complete') { +
-            setWindowLoaded(); +
-        } else { +
-            window.addEventListener('load', setWindowLoaded); +
-        } +
-        const hasLoaded = function () { +
-            return _windowLoaded; +
-        }; +
- +
-        autoSetupTimeout(1,oneplayer); +
     }     }
 </script> </script>
Line 164: Line 234:
             height : 100%;             height : 100%;
             color : #333;             color : #333;
 +        }
 +       
 +        .u-oneplayer .uop-control-bar {
 +          background-color: rgb(131 150 178 / 70%);
         }         }
                  
Line 169: Line 243:
            border : 1px solid silver;            border : 1px solid silver;
         }         }
-         +              
-        .uop-picker .dropzone { +
-         height: 300px; +
-        } +
-        +
         .uop-picker .upload-btn,.uop-picker .load-btn {         .uop-picker .upload-btn,.uop-picker .load-btn {
             margin-bottom : 2em;             margin-bottom : 2em;
Line 188: Line 258:
         }         }
      
-        .uop-picker .urlloader { +       
-          flex-direction : column; +
-        } +
-        +
         .uop-picker .urlloader .archive-url {         .uop-picker .urlloader .archive-url {
-          width : 600px; +           width: 90%; 
-          height : 30px;+           height: 30px;
         }                }       
                  
 +        .uop-picker .nav-tabs li {
 +          cursor : pointer;
 +        }
 +
 +  .uop-picker .lark-carousel .desc, .lark-carousel .ground {
 +    display: none;
 +  }
 +
 +  .uop-picker .lark-carousel.rotate .desc, .lark-carousel.rotate .ground {
 +    display: block;
 +  }
 +
 +  .uop-picker .lark-carousel .items-container {
 +    height: 100%; 
 +  }
 +
 +  .uop-picker .lark-carousel  .item img {
 +    max-width: 90%;
 +    max-height: 90%;
 +    display: block;
 +    margin: auto;
 +    cursor : pointer;
 +  }
 +
 +  .uop-picker .lark-carousel.rotate .items-container {
 +    width: 120px; 
 +    height: 170px; 
 +  }
 + 
 +  .uop-picker .lark-carousel.rotate .item img {
 +    display: block;
 +    height : 220px;
 +    width: 220px;
 +  }
 +
 +  .uop-picker .lark-carousel.coverflow .item {
 +    height : 360px;
 +    width : 360px;
 +  }
 +
 +  .uop-picker .lark-carousel.coverflow .item img {
 +    display: block;
 +    height : 360px;
 +    width : 360px;
 +  }
 +
 + .uop-picker .lark-carousel.slide .item img {
 +    display: block;
 +    height : 420px;
 +    width : 840px
 +  }
 </style> </style>