dabaixiaowo2015 2021-07-06 12:36 采纳率: 100%
浏览 58
已结题

HTML的MP4播放器，如何修改为可“外挂视频地址”的html或php

目标：
xxxxx.com/01.html#https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4
或 xxxxx.com/01.php#https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4

用以上格式实现播放。

原始代码

MP4播放器代码如下：01.html（内嵌视频地址）

<html lang="en">
<head>
<meta charset="utf-8">
<title>story</title>
<script src="https://cdn.jsdelivr.net/gh/mousekane/player@main/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mousekane/player@main/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();
            document.querySelector('video').requestFullscreen();
       }
    }
</script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-07-06 13:05
    关注

    location.hash得到#。。。。后面那串，用js设置下video对象的src就行。chrome测试通过

    img

    
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>story</title>
    <script src="https://cdn.jsdelivr.net/gh/mousekane/player@main/plyr.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mousekane/player@main/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>
            var src = location.hash.substring(1);
            if (src) document.querySelector('source').src = src;//通过hash传递了网址则设置source的src，否则不设置播放默认的视频

            plyr.setup();

        </script>
    </div>
    <script>
        document.onkeydown = function (e) {
            if (e.keyCode == 13) {
                var el = document.querySelector('video');
                el.click();
                document.querySelector('video').requestFullscreen();
            }
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 求Houdini使用行家，付费。价格面议。
  • ¥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 CF1927D 求Hack