使用PlayerJS快速建立自己的网页播放器

获取playerjs.js

进入PlayerJS官网创建播放器，自行设计样式，下载js文件(playerjs.js)

播放文件代码

使用php实现网页播放器效果，通过get方法传入参数url(视频地址)

首先判断是否有视频地址

<?php
$url=$_GET['url'];
if(empty($url)){
    echo '<html><head><meta charset="UTF-8"><title></title></head><body><h1>url未传入视频地址！</h1></body></html>';
    exit;
}
?>

然后html写出网页框架

复制代码
<!DOCTYPE html>
<html>
<head>
<title>Jyy-Player</title>
</head>
<body>


</body>
</html>
复制代码

插入playerjs文件地址

<script type="text/javascript" src="playerjs.js"></script>

设置视频播放div

<div id="player"></div>

定义播放器参数

<script>
   var player = new Playerjs({id:"player", file:"<?php echo $url; ?>"});
</script>

页面样式css

复制代码
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

#player {
    width: 100%;
    height: 100%;
    position: absolute
}
复制代码

 

posted @   富瑞阿得  阅读(623)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaScript实现监听网页复制并替换内容
·  JavaScript实现图片轮播效果
·  h5 video方法，事件，属性详解
·  RTSP播放器EasyPlayer.js使用无插件流媒体服务器接口实现web网页H5播放
·  h5 video方法，事件，属性详解
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手