wordpress的HTML5播放器插件分享，自建插件，如有错误请评论区反馈。

2025-04-07 00:27:36 作者：泥人传说管理员 分类：wordpress插件 128

这个插件具有以下特点：

  1. 通过自定义字段调用指定视频
  2. 播放器右侧显示播放列表
  3. 自动截取视频封面（通过WordPress的特色图片功能）
  4. 自动获取并显示视频时长
  5. 支持自定义视频标题
  6. 在WordPress管理菜单中添加了自定义选项
  7. 兼容所有WordPress版本
  8. 可以通过短代码在任何页面中使用

 

 

 

使用方法：

  1. 将整个 custom-video-player 文件夹复制到 WordPress 的 wp-content/plugins/ 目录下。
  2. 在WordPress后台激活插件。
  3. 在WordPress后台菜单中，你会看到新增的”视频播放器”选项。
  4. 在”视频播放列表”中添加新的视频：
    设置视频标题
    上传视频封面（特色图片）
    在自定义字段中输入视频URL
    可以自定义视频标题
    在任何页面或文章中，使用短代码 [custom_video_player] 插入播放器。

 

 

播放器特点：

  1. 响应式设计，适配各种屏幕尺寸
  2. 自动播放列表功能
  3. 视频时长自动获取和显示
  4. 美观的界面设计
  5. 支持视频封面预览
  6. 支持自定义视频标题

 

 

注意事项：

  1. 确保视频URL是可访问的
  2. 建议使用MP4格式的视频文件
  3. 视频文件大小建议控制在合理范围内，以确保良好的加载性能
  4. 建议为每个视频添加封面图片，以提升用户体验

 

 

 

代码：

 

 

在wordpress的插件目录Plugins下面新建一个名为custom-video-player的目录。

目录下面新建这几个文件：

1，custom-video-player.php

<?php
/**
* Plugin Name: Custom HTML5 Video Player
* Plugin URI: 
* Description: A custom HTML5 video player with playlist support and WordPress integration
* Version: 1.0.0
* Author: Your Name
* Text Domain: custom-video-player
*/
if (!defined('ABSPATH')) {
exit;
}
// 定义插件常量
define('CVP_VERSION', '1.0.0');
define('CVP_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('CVP_PLUGIN_URL', plugin_dir_url(__FILE__));
// 添加管理菜单
function cvp_add_admin_menu() {
add_menu_page(
'视频播放器设置',
'视频播放器',
'manage_options',
'custom-video-player',
'cvp_admin_page',
'dashicons-video-alt3',
30
);
}
add_action('admin_menu', 'cvp_add_admin_menu');
// 注册自定义文章类型
function cvp_register_post_type() {
register_post_type('video_playlist', array(
'labels' => array(
'name' => '视频播放列表',
'singular_name' => '视频播放列表'
),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'menu_icon' => 'dashicons-video-alt3'
));
}
add_action('init', 'cvp_register_post_type');
// 添加自定义字段
function cvp_add_meta_boxes() {
add_meta_box(
'cvp_video_details',
'视频详情',
'cvp_video_details_callback',
'video_playlist',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'cvp_add_meta_boxes');
// 视频详情回调函数
function cvp_video_details_callback($post) {
wp_nonce_field('cvp_video_details', 'cvp_video_details_nonce');

$video_url = get_post_meta($post->ID, '_cvp_video_url', true);
$video_title = get_post_meta($post->ID, '_cvp_video_title', true);
?>
<p>
<label for="cvp_video_url">视频URL：</label>
<input type="text" id="cvp_video_url" name="cvp_video_url" value="<?php echo esc_attr($video_url); ?>" class="widefat">
</p>
<p>
<label for="cvp_video_title">视频标题：</label>
<input type="text" id="cvp_video_title" name="cvp_video_title" value="<?php echo esc_attr($video_title); ?>" class="widefat">
</p>
<?php
}
// 保存自定义字段
function cvp_save_meta_box_data($post_id) {
if (!isset($_POST['cvp_video_details_nonce'])) {
return;
}
if (!wp_verify_nonce($_POST['cvp_video_details_nonce'], 'cvp_video_details')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
$video_url = sanitize_text_field($_POST['cvp_video_url']);
$video_title = sanitize_text_field($_POST['cvp_video_title']);
update_post_meta($post_id, '_cvp_video_url', $video_url);
update_post_meta($post_id, '_cvp_video_title', $video_title);
}
add_action('save_post', 'cvp_save_meta_box_data');
// 注册短代码
function cvp_video_player_shortcode($atts) {
wp_enqueue_style('cvp-style', CVP_PLUGIN_URL . 'css/style.css', array(), CVP_VERSION);
wp_enqueue_script('cvp-script', CVP_PLUGIN_URL . 'js/player.js', array('jquery'), CVP_VERSION, true);

$args = array(
'post_type' => 'video_playlist',
'posts_per_page' => -1
);

$videos = get_posts($args);
$playlist = array();

foreach ($videos as $video) {
$video_url = get_post_meta($video->ID, '_cvp_video_url', true);
$video_title = get_post_meta($video->ID, '_cvp_video_title', true);
$thumbnail = get_the_post_thumbnail_url($video->ID, 'thumbnail');

if ($video_url) {
$playlist[] = array(
'url' => $video_url,
'title' => $video_title ?: $video->post_title,
'thumbnail' => $thumbnail
);
}
}
wp_localize_script('cvp-script', 'cvpPlaylist', $playlist);
ob_start();
?>
<div class="cvp-container">
<div class="cvp-player">
<video id="cvp-video-player" controls>
<source src="" type="video/mp4">
您的浏览器不支持HTML5视频播放。
</video>
</div>
<div class="cvp-playlist">
<?php foreach ($playlist as $index => $video): ?>
<div class="cvp-playlist-item" data-index="<?php echo $index; ?>">
<div class="cvp-thumbnail">
<img src="<?php echo esc_url($video['thumbnail']); ?>" alt="<?php echo esc_attr($video['title']); ?>">
</div>
<div class="cvp-video-info">
<h3><?php echo esc_html($video['title']); ?></h3>
<span class="cvp-duration"></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('custom_video_player', 'cvp_video_player_shortcode');
// 管理页面回调函数
function cvp_admin_page() {
?>
<div class="wrap">
<h1>视频播放器设置</h1>
<p>使用短代码 [custom_video_player] 在页面中插入视频播放器。</p>
</div>
<?php
}

 

 

 

2,style.css

.cvp-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.cvp-player {
flex: 2;
padding: 20px;
background: #000;
}
#cvp-video-player {
width: 100%;
max-height: 600px;
background: #000;
}
.cvp-playlist {
flex: 1;
max-height: 600px;
overflow-y: auto;
background: #f5f5f5;
padding: 10px;
}
.cvp-playlist-item {
display: flex;
padding: 10px;
margin-bottom: 10px;
background: #fff;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.cvp-playlist-item:hover {
background: #e9e9e9;
}
.cvp-playlist-item.active {
background: #e0e0e0;
border-left: 4px solid #007bff;
}
.cvp-thumbnail {
width: 120px;
height: 68px;
margin-right: 10px;
overflow: hidden;
border-radius: 4px;
}
.cvp-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cvp-video-info {
flex: 1;
}
.cvp-video-info h3 {
margin: 0 0 5px 0;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.cvp-duration {
font-size: 12px;
color: #666;
}
/* 响应式设计 */
@media (max-width: 768px) {
.cvp-container {
flex-direction: column;
}
.cvp-player {
padding: 10px;
}
.cvp-playlist {
max-height: 300px;
}
.cvp-thumbnail {
width: 100px;
height: 56px;
}
}

 

 

 

3,Player.js

jQuery(document).ready(function($) {
const player = document.getElementById('cvp-video-player');
const playlistItems = document.querySelectorAll('.cvp-playlist-item');
let currentVideoIndex = 0;
// 格式化时间
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
// 获取视频时长
function getVideoDuration(url) {
return new Promise((resolve) => {
const video = document.createElement('video');
video.src = url;
video.addEventListener('loadedmetadata', () => {
resolve(video.duration);
});
});
}
// 更新播放列表项
async function updatePlaylistItems() {
for (let i = 0; i < playlistItems.length; i++) {
const durationSpan = playlistItems[i].querySelector('.cvp-duration');
const videoUrl = cvpPlaylist[i].url;
try {
const duration = await getVideoDuration(videoUrl);
durationSpan.textContent = formatTime(duration);
} catch (error) {
console.error('Error getting video duration:', error);
}
}
}
// 播放视频
function playVideo(index) {
if (index >= 0 && index < cvpPlaylist.length) {
currentVideoIndex = index;
const video = cvpPlaylist[index];
player.src = video.url;
player.play();
// 更新播放列表项的激活状态
playlistItems.forEach((item, i) => {
item.classList.toggle('active', i === index);
});
}
}
// 事件监听器
playlistItems.forEach((item, index) => {
item.addEventListener('click', () => {
playVideo(index);
});
});
// 视频结束事件
player.addEventListener('ended', () => {
if (currentVideoIndex < cvpPlaylist.length - 1) {
playVideo(currentVideoIndex + 1);
}
});
// 初始化
if (cvpPlaylist && cvpPlaylist.length > 0) {
updatePlaylistItems();
playVideo(0);
}
});

 

 

 

 

未经允许不得转载：泥人传说 » wordpress的HTML5播放器插件分享，自建插件，如有错误请评论区反馈。
分享到：
赞(0)

相关推荐

评论抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

热门文章

后羿面板当中的phpmyadmin管理报错的终级解决办法
如何提高网站速度与抗攻击能力：wordpress、cloudflare、waf与memcached的完整教程
wordpress主题Zibll子比主题 V7.6 免授权无限制破解版及安装教程
WordPress图片主题Mango分享，类朋友圈的博客主题
刚刚用ChatGPT-4O写了一个WordPress主题，你们来验证一下它的代码是否准确。
网络守护者物语：用 WAF 打跑坏蛋们的可爱冒险！

最新文章

from origin No Access-Control-Allow-Ori WAF Web应用防火墙 wordpress wordpress HTML5播放器 wordpress HTML5播放器安装 wordpress HTML5播放器安装方法 wordpresss插入HTML5播放器 WordPress主题 wordpress代码优化 wordpress优化 wordpress优化技术分享 wordpress使用技巧 wordpress使用技巧分享 wordpress侧边栏调用热门文章 wordpress侧边栏调用热门文章列表 wordpress修改登陆窗口 wordpress列表自动缩略图 WordPress固定链接 WordPress固定链接标题别名 wordpress建站技巧 wordpress建站技巧分享 wordpress技术 WordPress插件 wordpress文章列表自动缩略图 wordpress程序优化 wordpress程序植入HTML5播放器的方法 wordpress站群系统 wordpress站群系统当中的子站点图片报错 wordpress网站实现随机文章列表 wordpress网站首页优化 wordpress自动给文章列表添加缩略图 wordpress自动给文章列表添加缩略图的代码 wordpress自动缩略图 wordpress自定义多重筛选字段 wordpress自定义多重筛选字段列表 wordpress调用热门文章列表 固定链接标题别名自动转换 MD5 码 用代码插入播放器到wordpress 用代码植入HTML5播放 给wordpress登陆窗口添加验证码 自动转换 MD5 码 自定义多重筛选字段列表 通过代码修改wordpress