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 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动,linux应用,多线程