实现音频播放功能
解决README.md上的一些小错误
This commit is contained in:
parent
f970a801ce
commit
1727f34516
11
README.md
11
README.md
@ -1,9 +1,10 @@
|
|||||||
<p align="center">
|
<div style="text-align: center">
|
||||||
<a href="https://github.com/yiisoft" target="_blank">
|
<a href="https://github.com/yiisoft" target="_blank">
|
||||||
<img src="https://avatars0.githubusercontent.com/u/993323" height="100px">
|
<img src="https://avatars0.githubusercontent.com/u/993323" height="100px" alt="">
|
||||||
</a>
|
</a>
|
||||||
<h1 align="center">基于Yii 2框架的网盘系统</h1>
|
<h1 style="text-align: center">基于Yii 2框架的网盘系统</h1>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
这是一个基于[Yii 2](https://www.yiiframework.com/) PHP框架设计的小型网盘系统,作为我的毕业设计作业,它具备基本的网盘功能。
|
这是一个基于[Yii 2](https://www.yiiframework.com/) PHP框架设计的小型网盘系统,作为我的毕业设计作业,它具备基本的网盘功能。
|
||||||
|
|
||||||
@ -48,7 +49,7 @@
|
|||||||
计划实现的功能
|
计划实现的功能
|
||||||
-------------------
|
-------------------
|
||||||
|
|
||||||
文件预览(图像,视频ok)
|
文件预览(图像,视频,音频ok)
|
||||||
|
|
||||||
文件收集
|
文件收集
|
||||||
|
|
||||||
|
@ -150,6 +150,8 @@ $this->registerCssFile('@web/css/home_style.css');
|
|||||||
<?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
|
<?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
|
||||||
<?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?>
|
<?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?>
|
||||||
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewVideo(this, event)']) ?>
|
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewVideo(this, event)']) ?>
|
||||||
|
<?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?>
|
||||||
|
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
|
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@ -180,10 +182,8 @@ $this->registerCssFile('@web/css/home_style.css');
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--test area start-->
|
<!--test area start-->
|
||||||
<!--<video id="player" controls crossorigin playsinline>-->
|
<!--<audio id="audioPlayer" src=""></audio>-->
|
||||||
<!-- <source src="https://devs.chenx221.cyou:8081/index.php?r=home%2Fdownload&relativePath=%E3%80%90%E6%9C%9F%E9%96%93%E9%99%90%E5%AE%9A%E5%85%AC%E9%96%8B%E3%80%91%E9%95%B7%E7%80%AC%E6%9C%89%E8%8A%B1+LIVE+%E2%80%9CEureka%E2%80%9D+%5BDkt65nqwbhM%5D.webm"-->
|
<!--<button id="audioBtn" onclick="testf()">播放</button>-->
|
||||||
<!-- type="video/webm">-->
|
|
||||||
<!--</video>-->
|
|
||||||
<!--test area end-->
|
<!--test area end-->
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
@ -277,7 +277,7 @@ ActiveForm::end();
|
|||||||
Modal::end();
|
Modal::end();
|
||||||
|
|
||||||
Modal::begin([
|
Modal::begin([
|
||||||
'title' => '<h4>视频在线播放</h4>',
|
'title' => '<h4>视频播放</h4>',
|
||||||
'id' => 'videoModal',
|
'id' => 'videoModal',
|
||||||
'size' => 'modal-xl',
|
'size' => 'modal-xl',
|
||||||
]);
|
]);
|
||||||
@ -288,6 +288,17 @@ echo '<video id="vPlayer" controls crossorigin playsinline>
|
|||||||
|
|
||||||
Modal::end();
|
Modal::end();
|
||||||
|
|
||||||
|
Modal::begin([
|
||||||
|
'title' => '<h4>音频播放</h4>',
|
||||||
|
'id' => 'audioModal',
|
||||||
|
// 'size' => 'modal-sm',
|
||||||
|
]);
|
||||||
|
|
||||||
|
echo '<audio id="aPlayer" controls>
|
||||||
|
<source src="" type="">
|
||||||
|
</audio>';
|
||||||
|
|
||||||
|
Modal::end();
|
||||||
$this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
|
$this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
@ -439,8 +439,29 @@ function previewVideo(element, event) {
|
|||||||
videoModal.modal('show');
|
videoModal.modal('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
videoModal.on('hidden.bs.modal', function (e) {
|
videoModal.on('hidden.bs.modal', function () {
|
||||||
if (player) {
|
if (player) {
|
||||||
player.destroy();
|
player.destroy();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//music preview
|
||||||
|
var aPlayer;
|
||||||
|
var audioModal = $('#audioModal');
|
||||||
|
function previewAudio(element, event) {
|
||||||
|
event.preventDefault();
|
||||||
|
var audioElement = document.getElementById('aPlayer');
|
||||||
|
audioElement.src = element.href;
|
||||||
|
audioElement.type = element.getAttribute('type');
|
||||||
|
|
||||||
|
aPlayer = new Plyr(audioElement);
|
||||||
|
aPlayer.play();
|
||||||
|
|
||||||
|
// 显示模态框
|
||||||
|
audioModal.modal('show');
|
||||||
|
}
|
||||||
|
audioModal.on('hidden.bs.modal', function () {
|
||||||
|
if (aPlayer) {
|
||||||
|
aPlayer.destroy();
|
||||||
|
}
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user