function

The main function of this project is to automatically play video in the browser, and achieve volume control, fast forward and fast rewind, full screen control, play pause control and other functions.

Warehouse address: github.com/hapiman/chr…

Installing a Static Server

If nodeJS exists on your computer, you can install Anywhere to access the index.html page. Go to the project root directory, run the command: anywhere, and the browser will automatically open the http://localhost:8000 page.

Automate command execution using puppeteer

By calling the front-end page method in NodeJS, the Socket can realize remote control of the browser video playback.

Specific function realization

var _volumeNum = 1 / / the volume value
  var _speedNum = 1 / / speed value
  var videoSrc = 'demo02.mp4' // Switch resources

  window.onload = function () {
    var myVideo = document.getElementById('myVideo')
    var scSource = document.getElementById('sc')
    var myVideoBody = { pause: true }

    // Play finish command
    myVideo.addEventListener('ended'.function () {
      scSource.src = videoSrc;
      myVideo.load()
      myVideo.play()
    })

    / / initialization
    start()
  }

  / / for video
  function getVideo() {
    var myVideo = document.getElementById('myVideo')
    return myVideo
  }

  / / fast forward
  function vforward(params) {
    if (_speedNum >= 2) return
    _speedNum = accAdd(_speedNum, 0.1)
    console.log('vforward _speedNum: ', _speedNum)
    getVideo().playbackRate = _speedNum
  }

  / / fast rewind
  function vbackward() {
    if (_speedNum <= 0.5) return
    var myVideo = getVideo()
    _speedNum = accSub(_speedNum, 0.1)
    console.log('vbackward _speedNum: ', _speedNum)
    getVideo().playbackRate = _speedNum
  }

  // Execute the command after the page loads
  function start() {
    var myVideo = getVideo()
    myVideo.volume = 1
    myVideo.playbackRate = 1
  }

  // Set mute
  function setMuted() {
    getVideo().muted = true
  }

  // Set unmute
  function setNotMuted() {
    getVideo().muted = false
  }

  / / play
  function vplay() {
    console.log('vplay =>')
    getVideo().play();
  }

  / / pause
  function vstop() {
    getVideo().pause();
  }

  / / replay
  function vrestart() {
    getVideo().currentTime = 0
    getVideo().play()
  }

  // Cancel full screen
  function cancelFull() {
    screenfull.exit()
  }

  // Turn on full screen
  function openFull() {
    getVideo().webkitRequestFullscreen()
  }

  / / the volume -
  function reduceVolume() {
    console.log('reduceVolume:: current volume: ', myVideo.volume) // Current volume
    getVideo().muted = false
    if (_volumeNum <= 0) return
    _volumeNum = accSub(_volumeNum, 0.1)
    getVideo().volume = _volumeNum
  }

  / / the volume + +
  function addVolume() {
    console.log('addVolume:: current volume: ', myVideo.volume)   // Current volume
    getVideo().muted = false
    if (_volumeNum >= 1) return
    _volumeNum = accAdd(_volumeNum, 0.1)
    getVideo().volume = _volumeNum
  }
Copy the code

Problems encountered

About artificial triggers

Autoplay can play automatically when you open a web page, but in silent mode. Starting with version 76, Chrome’s security mechanism no longer allows audio toplay automatically.

Similarly, for security reasons, browsers cannot be set to full screen through the interface without user intervention.

Puppeteer was introduced in the current project to simulate a human-triggered page.