ts+webpack视频播放器组件（四）

原视频：https://www.bilibili.com/video/BV1sU4y1a7ri

day4 窗口关闭、窗口内播放器

1. 窗口能打开了。但是不能关闭了。。。所以我们要写一个关闭事件绑定给x图标。

   // 事件操作
     handle() {
       let popupClose = this.tempContainer.querySelector(`.${styles['popup-title']} i`)
       popupClose.addEventListener('click',()=>{
         document.body.removeChild(this.tempContainer)
         this.settings.mask && document.body.removeChild(this.mask)
       })
     }

2. 记得，要在init里面去调用handle。

3. 回到我们前文给iView接口设置的content属性。给他添加一个HTMLElement类型的参数。

   interface iView {
     width?: string,
     height?: string,
     title?: string,
     pos?: string,
     mask?: boolean,
     content?: (dom:HTMLElement) => void
   }

4. 然后在view类里面，定义一个方法，用来回调content函数。我这里命名为createContent

   //回调使用content创建视频（根据对应需求，如果是表格等就创建表格。）
     createContent(){
       let popupContent = this.tempContainer.querySelector(`.${styles['popup-content']}`)
       this.settings.content(popupContent)
     }

   记得要在init里调用

5. 接下来该新建和视频功能相关的组件。再components目录下，新建一个video/index.ts。在这个ts里，仿造popView的写法，设置接口降低耦合等等。具体代码如下

   interface iVideo{
     url:string
     dom:HTMLElement
     
     width?:string
     height?:string
     autoplay?:boolean
   }
   
   interface iComponents{
     tempContainer
     init()
     template()
     handle()
   }
   
   function videoView(options:iVideo){
     return new video(options)
   }
   
   class video implements iComponents{
     tempContainer
     constructor(private settings:iVideo) {
       // this.settings = Object.assgin({
       //   width:'100%',
       //   height:'100%',
       //   autoplay:false
       // },settings)
       this.settings = {
         url:settings.url,
         dom:settings.dom,
         width:settings.width||'100%',
         height:settings.height||'100%',
         autoplay:settings.autoplay||false
       }
       this.init()
     }
     init() {
       this.template()
       this.handle()
     }
     template() {
     }
     handle() {
     
     }
   }
   
   export default videoView

   注意，代码中关于assign的部分注释掉是因为ts不识别assgin属性，所以我换了一种方式去做默认值的需求

6. 类创建成功之后，进入main.ts，把这个类导入。并在popView里面传入实例。以下是main.ts代码

   import './assets/css/index.css'
   import './assets/css/iconfont.css'
   import popView from './components/popView'
   import videoView from './components/videoView'
   
   let view = document.querySelector(".view div")
   
   view.addEventListener('click',function (){
     let url = this.dataset.url
     let title = this.dataset.title
     
     popView({
       width:'880px',
       height:'556px',
       title,
       pos:'center',
       mask:true,
       content:(dom)=>{
         //el是容器所在的dom，作为参数传给video绑定
         videoView({
           url,
           dom
         })
       }
     })
   })

7. 传入所需要的参数后，对播放器的模板部分进行编写。

   template() {
       this.tempContainer = document.createElement('div')
       this.tempContainer.className = styles.video
       this.tempContainer.style.width = this.settings.width
       this.tempContainer.style.height = this.settings.height
       this.tempContainer.innerHTML = `
         <video class="${styles['video-content']}"
         src="${this.settings.url}"
         >
         </video>
         <div class="${styles['video-controls']}">
           <div class="${styles['video-progress']}">
             <div class="${styles['video-progress-now']}">
             </div>
             <div class="${styles['video-progress-suc']}">
             </div>
             <div class="${styles['video-progress-bar']}">
             </div>
           </div>
           <div class="${styles['video-play']}">
             <i class="iconfont icon-bofang"></i>
           </div>
           <div class="${styles['video-time']}">
             <span>00:00</span> / <span>00:00</span>
           </div>
           <div class="${styles['video-full']}">
           <i class="iconfont icon-quanping"></i>
         </div>
           <div class="${styles['video-volume']}">
             <i class="iconfont icon-yinliang"></i>
             <div class="${styles['video-volprogress']}">
               <div class="${styles['video-volprogress-now']}">
               </div>
               <div class="${styles['video-volprogress-bar']}">
               </div>
           </div>
         </div>
         </div>
       `
       this.settings.dom.appendChild(this.tempContainer)
     }

8. 模板创建完成后，需要调整css，这里不赘述，我们运行后，点开弹层，发现正常显示了视频。