xdlumia / vue3-video-play

适用于 Vue3 的 hls.js 播放器组件,配置丰富,界面还算好看
https://codelife.cc/vue3-video-play/
602 stars 99 forks source link

请问视频支持哪些格式? #16

Closed jtyoui closed 2 years ago

jtyoui commented 2 years ago

up主,我现在测试的视频格式只能是:mp4格式,请问现在支持多少格式?能否出一个列表:如

xdlumia commented 2 years ago

https://dreamwq.com/vue3-video-play/guide/install.html#hls-m3u8%E8%A7%86%E9%A2%91-%E7%9B%B4%E6%92%AD 看一下这里 基于hls 的m3u8支持

从 Windows 版邮件https://go.microsoft.com/fwlink/?LinkId=550986发送

发件人: @.> 发送时间: 2021年9月22日 11:20 收件人: @.> 抄送: @.***> 主题: [xdlumia/vue3-video-play] 请问视频支持哪些格式? (#16)

up主,我现在测试的视频格式只能是:mp4格式,请问现在支持多少格式?能否出一个列表:如

― You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/xdlumia/vue3-video-play/issues/16, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEI3R7UNABATX3J5XNTFYLDUDFDO5ANCNFSM5EQIUUFQ.

jtyoui commented 2 years ago

@xdlumia 请问怎么才能将不同视频格式都统一处理成m3u8格式?是否有统一的API可以调用?还是说要自己去实现?

jtyoui commented 2 years ago

我发现一个问题,就是在加载视频的时候,无法显示视频按钮,一片漆黑。这是否属于正常? image

xdlumia commented 2 years ago

视频缓存成功会才会出现操作按钮。如果想缓冲之前就想看到缓存按钮 或者修改loading 背景色 可以修改 .d-loading 的样式

从 Windows 版邮件https://go.microsoft.com/fwlink/?LinkId=550986发送

发件人: @.> 发送时间: 2021年9月22日 15:39 收件人: @.> 抄送: @.>; @.> 主题: Re: [xdlumia/vue3-video-play] 请问视频支持哪些格式? (#16)

我发现一个问题,就是在加载视频的时候,无法显示视频按钮,一片漆黑。这是否属于正常? [image]https://user-images.githubusercontent.com/28988355/134302271-f8776261-bdb5-4c8a-8e84-1f040796195c.png

― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/xdlumia/vue3-video-play/issues/16#issuecomment-924667876, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEI3R7QQ7E7KH4UVGDSRZW3UDGB3XANCNFSM5EQIUUFQ.

jtyoui commented 2 years ago

我找到你的源代码,已经修改了背景色和颜色,缓存颜色已经改变,但是这并不是我想要的。我想要的是缓存的时候能显示:操作按钮.....

.d-loading[data-v-b2384226] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 7, 91, 0.3);
    z-index: 2;
    color: #2dce09;
    text-align: center;
    font-size: 13px
}

image

xdlumia commented 2 years ago
   bottom: 0px;

你把bottom 改为60px 即可

jtyoui commented 2 years ago

@xdlumia Nice,可以了,非常感谢!我还有一个头疼的问题。就是我的视频格式非常多,我现在的处理方法是用Python语言来处理成统一的m3u8格式。但是我觉得这样不太方便。我的想法是:是否有一个统一的JS API可以调用??对于我来说,那只是黑盒.....

xdlumia commented 2 years ago

@xdlumia Nice,可以了,非常感谢!我还有一个头疼的问题。就是我的视频格式非常多,我现在的处理方法是用Python语言来处理成统一的m3u8格式。但是我觉得这样不太方便。我的想法是:是否有一个统一的JS API可以调用??对于我来说,那只是黑盒.....

那这个我就不是很清楚了。我处理视频的少

xdlumia commented 2 years ago

@xdlumia Nice,可以了,非常感谢!我还有一个头疼的问题。就是我的视频格式非常多,我现在的处理方法是用Python语言来处理成统一的m3u8格式。但是我觉得这样不太方便。我的想法是:是否有一个统一的JS API可以调用??对于我来说,那只是黑盒.....

那这个我就不是很清楚了。我处理视频的少

我所能想到的只能是统一处理成固定格式的

jtyoui commented 2 years ago

@xdlumia 还有一个问题。我明明设置不自动播放,我的参数是这样

<script setup lang="ts">
import {reactive} from "vue";

const options = reactive({
  color: "#409eff", //主题色
  title: "", //视频名称
  src: '', //视频源
  type: '', //视频类型
  muted: true, //静音
  webFullScreen: true,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  lightOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
</script>

image 但是为什么我打开,还是在缓存?我希望的是缓存图片变成一个按钮,这个按钮并且可以打开文件,类似于界面播放一样? image