在videojs中触摸大播放按钮时添加功能

问题描述

我已经覆盖了 videojs 上的全屏功能，因此我可以在我创建的非常特定的自助服务终端模式下使用，并且效果很好。但是现在我需要在触摸大播放按钮时将其设为全屏。

我发现了两种使用鼠标点击的方法，但我需要使其与触摸配合使用，因为它是一个移动应用程序。

<div class="video-wrapper" align="center">';
  echo '    
    <video id="my-video" class="video-js" controls preload="auto" width="230px" height="250px" poster="../midia/' . $_GET['id'] . '.jpg" data-setup="{}">
      <source src="../midia/' . $_GET['id'] . '.mp4" type="video/mp4">
    </video>
</div>

var player = videojs('my-video');

const fullscreenSwitch = () => {
  if(videojsWrapper.classList.contains("newFullscreen")) {
    videojsWrapper.classList.remove("newFullscreen");   
    body.classList.remove("noScroll");
    myButtonDom.innerHTML = "&#x21F1";
  } else {
    videojsWrapper.classList.add("newFullscreen");
    body.classList.add("noScroll");
    myButtonDom.innerHTML = "&#x21F2";
  }
}

// Add new toggle fullscreen button
var videojsWrapper = document.querySelector(".video-wrapper").childNodes[1];
var body = document.querySelector("body");

var myButton = player.controlBar.addChild("button");
var myButtonDom = myButton.el();

myButtonDom.innerHTML = "&#x21F1";
myButtonDom.addEventListener('click',() => fullscreenSwitch());

// Remove old toggle fullscreen button
const controlBar = player.getChild('ControlBar');
controlBar.removeChild(controlBar.getChild('FullscreenToggle'));

// Make fullscreen on play
const playButton = document.querySelector(".vjs-big-play-button");

// ONLY ON CLICK
/* playButton.addEventListener('click',fullscreenSwitch); */

// ONLY ON CLICK
/* player.bigPlayButton.on('click',fullscreenSwitch); */

// DON'T WORK
/* playButton.addEventListener('touchstart',fullscreenSwitch); */

// DON'T WORK
/* document.getElementsByClassName("vjs-big-play-button").addEventListener('click',fullscreenSwitch); */

// DON'T WORK
/* playButton.onClick = function(){fullscreenSwitch} */

// DON'T WORK
/* player.bigPlayButton.on('touchstart',fullscreenSwitch); */

// DON'T WORK
/* player.bigPlayButton.on('ontouchstart',fullscreenSwitch); */

// DON'T WORK
/* playButton.on('click',fullscreenSwitch); */

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）