更新:好的,虽然我没有完全解决这个问题,但我确实找到了一个处理我最关心的工作......用户体验.
首先视频没有开始加载,直到观众点击播放按钮,所以我假设持续时间信息不可用(我不知道如何解决这个特定问题...虽然我假设它只涉及将视频元数据与视频分开加载,但我甚至不知道这是否可行).
因此,为了解决没有持续时间数据的事实,我决定完全隐藏持续时间信息(实际上是整个控件),直到你点击播放.
我知道......它的作弊.但是现在它让我开心:)
那说...如果有人知道如何从视频文件中分别加载视频元数据...请分享.我认为应该彻底解决这个问题.
我正在开发一个带有自定义界面的HTML5视频播放器,但是我在显示视频持续时间信息方面遇到了一些问题.
我的HTML非常简单(见下文)
<video id="video" poster="image.jpg" controls>
<source src="video_path.mp4" type="video/mp4" />
<source src="video_path.ogv" type="video/ogg" />
</video>
<ul class="controls">
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我用来获取和插入持续时间的javascript是
var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;
Run Code Online (Sandbox Code Playgroud)
问题是没有任何反应.我知道视频文件有持续时间数据,因为如果我只使用默认控件,它显示正常.
但真正奇怪的是,如果我将警报(持续时间)放在我的代码中,就像这样
alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;
Run Code Online (Sandbox Code Playgroud)
然后工作正常(减去弹出的烦人警报).任何想法在这里发生了什么或如何解决它?
我正在使用内置的MediaRecorder替换RecordRTC,以便在Chrome中录制音频.然后在带有音频api的程序中播放录制的音频.我无法使audio.duration属性工作.它说
如果视频(音频)是流式传输且没有预定义长度,则返回"Inf"(无限).
使用RecordRTC,我不得不使用ffmpeg_asm.js将音频从wav转换为ogg.我的猜测是在RecordRTC设置预定义音频长度的过程中的某个地方.有没有办法使用MediaRecorder设置预定义的长度?
javascript google-chrome html5-audio mediarecorder recordrtc
我想获取上传者视频的比特率,因为后端需要它。
var video = document.createElement('video');
video.preload = 'metadata';
video.src = URL.createObjectURL(document.getElementById('fileUp').files[0]);
window.URL.revokeObjectURL(video.src);
console.log(video.bitrate);
Run Code Online (Sandbox Code Playgroud) 我想在 react.js 上传后从 onChange 函数获取视频时长。我已经在 stackblitz 中分享了我的代码。链接在这里 -工作演示
我在代码中提到我需要获取视频时长。我在 onchange 函数的reader.onloadend部分需要它。这是我在以下部分给出的代码:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
get_video: '',
videoAttribute: []
};
}
chosenVideo(e) {
e.preventDefault();
/*this.setState({
file_state: e.target.files[0]
});*/
var file = e.target.files[0];
var file_state = e.target;
var reader = new FileReader();
reader.onloadend = () => {
this.setState({
get_video: reader.result, …Run Code Online (Sandbox Code Playgroud) 我正在尝试检查我上传的视频是否超过 30 秒,但无法获得我需要的示例。这是我到目前为止检查大小和其他一些事情的代码:
readVideoUrl(event: any) {
this.videoFile = [];
const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
const files: FileList = target.files;
if (files) {
this.videoFile.push(files[0]);
this.videoModel.name = files[0].name;
}
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
this.videoUrl = (<FileReader>event.target).result;
};
reader.readAsDataURL(event.target.files[0]);
}
const FileSize = files[0].size / 1024 / 1024; // in MB
if (FileSize > 50) {
this.videoSizeError = true;
} else {
this.videoSizeError = …Run Code Online (Sandbox Code Playgroud) javascript ×6
html ×2
angular ×1
filereader ×1
html5-audio ×1
onchange ×1
php ×1
reactjs ×1
recordrtc ×1
video ×1
video-upload ×1
web ×1