目标:
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>
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>