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 AttributeError: 'EasyDict' object has no attribute 'BACKUP_DB_INFO'
  • ¥15 前端高拍仪调用问题报错
  • ¥15 想用octave解决这个数学问题
  • ¥15 Centos新建的临时ip无法上网,如何解决?
  • ¥15 海康威视如何实现客户端软件对设备语音请求的处理。
  • ¥15 支付宝h5参数如何实现跳转
  • ¥15 MATLAB代码补全插值
  • ¥15 Typegoose 中如何使用 arrayFilters 筛选并更新深度嵌套的子文档数组信息
  • ¥15 前后端分离的学习疑问?
  • ¥15 stata实证代码答疑