Company has a video broadcast business requirements, so pay attention to the recently, before one has written a short version of the, is that taking the ali cloud open a video player, was only on the function of a video playback, now want to add a new function, increasing video buried and how long does it play, pause, end, drag and drop, and so on function of record, This feature was developed for me, and I found three open source video players

Watermelon player v2.h5player.bytedance.com/ as byte is a group of open source

Tencent video unified player m.v.qq.com/txp/v3/ should be Tencent video team open source

Ali Cloud video player help.aliyun.com/document_de…

After looking at these three documents, it may be preconceived ideas, or it may be that my former colleague used the player of Ali Cloud. The changes are relatively small, so I used the player of Ali Cloud (I feel that the documents and functions of The player of Melon are also very good).

Note: this video is an online video, in advance to ali cloud servers, can be imported in the browser address direct access, so that also have the place with bad, understand a little knowledge, can see your video address in f12 console, before and after the need to end, with the signature, avoid the abnormal access.

  <div id="app">
    <div class="prism-player" id="J_prismPlayer"></div>
  </div>
  
  <script src="./vue.js"></script>
    <script>
      let { createApp } = Vue
      let app = createApp({
        data() {
          return {
            player: null}},mounted() {
          this.player = new Aliplayer({
            "id": "J_prismPlayer"./ / id name
            "source": "".//url Online video address
            "cover": "".// Video cover address
            "width": "500px".// Video width
            "height": "500px".// Video height
            "autoplay": true
          }, (player) = > {
            console.log("Player created.");
          });
          this.operation()
        },
        methods: {
           / / operation
          operation(){
            / / pause
            this.player.on("pause".() = >{
              console.log("Pause")})// Play the video (the first one is played and the pause one is played)
            this.player.on("play".() = >{
              console.log("Play")})/ / play position changes triggered this. Player. The getCurrentTime () gets the current playback time
            this.player.on("timeupdate".(e) = >{
              console.log("Current time".this.player.getCurrentTime())
            })
            // Full screen and exit full screen. Drag and drop is not written here
          }
        },
      }).mount("#app") 
    </script>
Copy the code

Timeupdate This is triggered when the playback position changes and is executed four times per second

Before when you use the uni – app, uni. CreateInnerAudioContext () listening to audio, also perform four times per second, the problem, consult the company knowledgeable backend, he may not understand, then to me knows nothing but pretends to know explained, this is the cause of the operating system time slice rotation, Ok, this also involves my knowledge blind spot, but this is not too important for now, first implement the function, then go to study this.

The requirement of this video burial point is to play for 30 seconds, send a request, until it goes 4 times per second

let count1 = 0, count2=0;
this.player.on("timeupdate".(e) = >{
  console.log("Current time".this.player.getCurrentTime())
  count +=1;
  if(count % 4= = =0){
      count2 += 1
     if(count2 % 30= = =0) {console.log("Send a request")}}})Copy the code

So, the function of sending a request 30 seconds after playback is implemented, the backend gives me the interface document, each request should have the current playback time, volume, whether or not full screen, I will make a package axios

    playerAxios(obj){
        this.axios.post("Request address", {... obj,// Parameters to be passed at each buried point
            volume:this.player.getVolume(), // Get the current volume
            is_full_screen:this.player.fullscreenService.getIsFullScreen(), // Get the full screen status of the player
            // Get the current playback time. Note that from the screenshot above, the time is not an integer. Convert it to an integer or negotiate with the backend
	    video_time:parseInt(this.player.getCurrentTime())  
        }).then(res= >{})}this.player.on("pause".() = >{
      playerAxios({
          id:"XXX"// The interface document pauses the defined field})})Copy the code

In this way, the basic video buried point function is realized, remember to test, for the company now, the video data is still very important, through the buried point can analyze what customers like to watch the video, which will affect the company’s decision.