dabaixiaowo2015 2022-07-02 22:51 采纳率: 100%
浏览 61
已结题

视频播放器全屏播放问题

代码执行与实际操作不符合

视频播放器全屏播放问题


```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html播放器</title>

<script src="cssjs/plyr.js"></script>

<link rel="stylesheet" href="cssjs/plyr.css">
<style>
    body{background-color: #262626}
    .m{ margin-left:0; margin-right:0;  margin-bottom:0;  margin-top: 0;  }
</style>

</head>
<body>

<div class="m">
<video poster="vs.png" controls>
<source  src="https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4" type="video/mp4">
</video>
<script>plyr.setup();</script>
</div>


<script>
 
     document.onkeydown = function (e) {
            if (e.keyCode == 13) {
                var el = document.querySelector('video');
                el.click();
                var el =document.querySelector("body > div.m > div > div.plyr__controls > button:nth-child(8)");
                el.click();

                
            }
        }
</script>


</body>
</html>

安卓端要有click视频才会播放,所以加了点击与全屏
 document.onkeydown = function (e) {
            if (e.keyCode == 13) {
                var el = document.querySelector('video');
                el.click();
                var el =document.querySelector("body > div.m > div > div.plyr__controls > button:nth-child(8)");
                el.click();

body > div.m > div > div.plyr__controls > button:nth-child(8) 是播放器全屏按钮的js路径


不执行上述代码,实际用鼠标点击视频一次,视频开始播放,点击全屏按钮,视频全屏,然后用键盘的左右键和空格键就可以控制视频的暂停快进快退,

但用上述代码执行,也能播放和进入全屏,但进入后死活无法进行暂停快进快推

测试文件
[](https://wwi.lanzoup.com/iBDXt079znyj)
  • 写回答

1条回答 默认 最新

  • 天际的海浪 2022-07-03 02:51
    关注

    用.focus()把焦点移动到全屏按钮上即可

     document.onkeydown = function (e) {
            if (e.keyCode == 13) {
                var el = document.querySelector('video');
                el.click();
                var el2 =document.querySelector("body > div.m > div > div.plyr__controls > button:nth-child(8)");
                el2.click();
                el2.focus(); // 用.focus()把焦点移动到全屏按钮上即可
                
            }
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 7月5日
  • 已采纳回答 7月3日
  • 创建了问题 7月2日

悬赏问题

  • ¥15 使用yolov5-7.0目标检测报错
  • ¥15 对于这个问题的解释说明
  • ¥200 询问:python实现大地主题正反算的程序设计,有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错,能帮助用python实现程序实现高斯正反算吗?有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错?CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备