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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

CSDN专家-showbo 2021-07-06 13:05

关注

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


<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>