【问题标题】:Is it possible for my player to play 30 first seconds of my audio/video file?我的播放器是否可以播放我的音频/视频文件的前 30 秒?
【发布时间】:2018-06-21 19:13:43
【问题描述】:

是否可以让音频播放器仅在文件的前 30 秒播放文件?

这只是我的播放器的一个示例,其中包含音乐来源(稍后我会进行更改,以便从数据库中提取它)。

<div class="col-md-4 player">
  <div class="audio-player">
    <audio id="audio-player"  controls="controls">
      <source src="media/Blue Browne.ogg" type="audio/ogg"></source>
      <source src="media/Blue Browne.mp3" type="audio/mpeg"></source>
      <source src="media/Georgia.ogg" type="audio/ogg"></source>
      <source src="media/Georgia.mp3" type="audio/mpeg"></source>
    </audio>
  </div>
  <!---->
  <script type="text/javascript">
    $(function(){
      $('#audio-player').mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','progress','volume'],
        audioVolume: 'horizontal',
        iPadUseNativeControls: true,
        iPhoneUseNativeControls: true,
        AndroidUseNativeControls: true
      });
    });
  </script>
</div>

【问题讨论】:

  • 当用户按下播放键时启动计数器,当计数器达到您设置的限制时,然后以编程方式停止播放器。虽然这是一个不太理想的解决方案。只需将 30 秒的音频文件放到您的网站上即可。
  • Darren,我理解,但我正在尝试创建一个销售这些音频/视频文件的网站,我认为拥有 30 秒的全长文件进行预览会很费力
  • 您是否尝试过使用 setTimeout 函数在媒体超时时暂停媒体?
  • @silvabizhub 我有一个销售音乐的网站 - 那里有一些程序会遍历音频文件目录并为你创建 30 秒的样本 - 然后上传它们 - 我用声音锻造

标签: javascript mediaelement.js


【解决方案1】:

我不能 100% 确定这些事件名称是否正确,但这个底层代码应该可以工作。

var playTimeout;    

$("#audio-player").on("play", function(e) {
    playTimeout = setTimeout(function() {
        $("audio-player").pause();
        $("audio-player").setCurrentTime(0); // Restarts video
    }, 30000); // 30 seconds in ms
});


$("#audio-player").on("pause", function(e) {
    clearTimeout(playTimeout);
});

【讨论】:

  • 谢谢马修·博丁
【解决方案2】:

您可以为 timeupdate 事件添加事件处理程序。它将每隔一秒左右定期调用一次。在事件处理函数中,您可以检查当前播放器的持续时间。如果是 30 秒或更长时间,您可以停止播放器。它将确保您的视频播放时间不超过 30 秒。

查看 MediaElement 文档:https://github.com/mediaelement/mediaelement/blob/master/docs/api.md#events

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-03-12
    • 2014-06-13
    • 1970-01-01
    • 1970-01-01
    • 2018-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多