Media标签和插件的关系(废弃)

因为Android盒子的碎片化，导致很多播放器异常发生。

为了让用户能够根据自己的场景自定义播放器，JsView提供了JsViewPlugin机制，建立Media标签<audio>和<video>到自定义播放器的通路。

你可以在JsViewPlugin.DomAudio/DomVideo和JsViewPlugin.AudioPlayer/VideoPlayer两个时机中的任意一个进行自定义Hook操作。

Media标签和JsViewPlugin之间的默认关系如图(以Video为例, Audio类同):

NaN%

@startuml
skinparam roundcorner 15
rectangle "JS 端"                    as Js          <<$archimate/product>> #Application
rectangle "JsViewPlugin DomVideo"    as DomVideo    <<$archimate/component>> #Business
rectangle "JsViewPlugin VideoPlayer" as VideoPlayer <<$archimate/product>> #Technology

Js       -down-> DomVideo    : ① setProperty
Js       -down-> DomVideo    : ① call method
DomVideo -down-> VideoPlayer : ② call function

DomVideo    -up.> Js         : ③ onEvent
VideoPlayer -up.> DomVideo   : ④ onListenerCallback

@enduml

• Video创建

  

  NaN%

  @startuml
  skinparam roundcorner 15
  
  actor       "使用者"                    as User
  participant "JS 端"                    as Js 
  participant "JsViewPlugin DomVideo"    as DomVideo 
  participant "JsViewPlugin VideoPlayer" as VideoPlayer 
  
  User -> Js:               new Video()
  Js -> DomVideo:           DomVideo()
  
  Js -> DomVideo:           openDomMedia()
  DomVideo -> VideoPlayer:  VideoPlayer()
  
  Js -> DomVideo:           setVideoContainer()
  Js -> DomVideo:           setOnEventListener()
  @enduml

• Video销毁

  

  NaN%

  @startuml
  skinparam roundcorner 15
  
  actor       "使用者"                    as User
  participant "JS 端"                    as Js 
  participant "JsViewPlugin DomVideo"    as DomVideo 
  participant "JsViewPlugin VideoPlayer" as VideoPlayer 
  
  User -> Js:               parent.removeChild(video)
  Js -> DomVideo:           finalize()
  DomVideo -> VideoPlayer:  stop()
  DomVideo -> VideoPlayer:  release()
  @enduml

• Video src属性设置

  

  NaN%

  @startuml
  skinparam roundcorner 15
  
  actor       "使用者"                    as User
  participant "JS 端"                    as Js 
  participant "JsViewPlugin DomVideo"    as DomVideo 
  participant "JsViewPlugin VideoPlayer" as VideoPlayer 
  
  User -> Js:               video.src=[URL]
  Js -> DomVideo:           setProperty()
  DomVideo -> VideoPlayer:  reset()
  DomVideo -> VideoPlayer:  setOnBufferingUpdateListener()
  DomVideo -> VideoPlayer:  setOnCompletionListener()
  DomVideo -> VideoPlayer:  setOnErrorListener()
  DomVideo -> VideoPlayer:  setOnInfoListener()
  DomVideo -> VideoPlayer:  setOnSeekCompleteListener()
  DomVideo --> Js:          onEvent("loadstart")
  
  DomVideo -> VideoPlayer:  setDataSource([URL])
  DomVideo -> VideoPlayer:  prepare()
  VideoPlayer --> DomVideo: onPrepared()
  DomVideo --> Js:          onEvent("durationchange")
  DomVideo --> Js:          onEvent("loadedmetadata")
  DomVideo --> Js:          onEvent("canplay")
  @enduml

• Video play方法调用

  

  NaN%

  @startuml
  skinparam roundcorner 15
  
  actor       "使用者"                    as User
  participant "JS 端"                    as Js 
  participant "JsViewPlugin DomVideo"    as DomVideo 
  participant "JsViewPlugin VideoPlayer" as VideoPlayer 
  
  User -> Js:               video.play()
  Js -> DomVideo:           play()
  DomVideo --> Js:          onEvent("play")
  DomVideo -> VideoPlayer:  start()
  DomVideo --> Js:          onEvent("playing")
  DomVideo --> DomVideo:    sleep(300)
  DomVideo --> Js:          onEvent("timeupdate")
  
  @enduml