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

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 请问有会的吗，用MATLAB做
  • ¥15 phython如何实现以下功能？查找同一用户名的消费金额合并—
  • ¥15 ARIMA模型时间序列预测用pathon解决
  • ¥15 孟德尔随机化怎样画共定位分析图
  • ¥18 模拟电路问题解答有偿速度
  • ¥15 CST仿真别人的模型结果仿真结果S参数完全不对
  • ¥15 误删注册表文件致win10无法开启
  • ¥15 请问在阿里云服务器中怎么利用数据库制作网站
  • ¥60 ESP32怎么烧录自启动程序，怎么查看客户esp32板子上程序及烧录地址
  • ¥50 html2canvas超出滚动条不显示