Javascript 无法在MacOS Safari浏览器和iOS设备上播放in.mp4或.webm中的网络摄像头录制
我通过VideoJS录制了一段视频。代码如下所示:Javascript 无法在MacOS Safari浏览器和iOS设备上播放in.mp4或.webm中的网络摄像头录制,javascript,ios,safari,mp4,videojs-record,Javascript,Ios,Safari,Mp4,Videojs Record,我通过VideoJS录制了一段视频。代码如下所示: // Video recording via webcam var videoMaxLengthInSeconds = 180; // Inialize the video player let videoBlob; var player = videojs("myVideo", { controls: true, width: 720, height: 480, fluid: false,
// Video recording via webcam
var videoMaxLengthInSeconds = 180;
// Inialize the video player
let videoBlob;
var player = videojs("myVideo", {
controls: true,
width: 720,
height: 480,
fluid: false,
plugins: {
record: {
audio: true,
video: true,
maxLength: videoMaxLengthInSeconds,
debug: true,
videoMimeType: "video/mp4"
}
}
}, function() {
// print version information at startup
videojs.log(
'Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'),
'and recordrtc', RecordRTC.version
);
});
// error handling for getUserMedia
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
// Handle error events of the video player
player.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording !
player.on('startRecord', function() {
console.log('started recording! Do whatever you need to');
});
// user completed recording and stream is available
// Upload the Blob to your server or download it locally !
let recording;
let recordingData;
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
recordingData = player.recordedData;
videoBlob = player.recordedData.video;
//let myblob = new Blob(player.recordedData, { type: "video/webm" });
let objectURL = window.URL.createObjectURL(player.recordedData)
let downloadButton = document.getElementById('downloadButton');
downloadButton.href = objectURL;
downloadButton.download = "Vlog.webm";
//recording = new File(myBlob, 'vlog.webm')
console.log(recording)
console.log('finished recording: ', videoBlob);
});
// Sending recorder video to server
$('#postButton').click(function() {
// Get form data
form = document.querySelectorAll('#form');
let formData = new FormData(form[0]);
let disabled = document.getElementById("commentsDisable").checked
console.log("Comments Enabled: " + disabled)
formData.append('commentsDisabled', disabled);
let selection = document.getElementById('categorySelect');
let selected = selection.options[selection.selectedIndex].value;
// Append selected category
formData.append('category', selected)
//Apend YouTube embed link
if (ytUrl) {
formData.append('ytlink', ytUrl)
}
// Append recordedBlob to form data as file
if (recordingData) {
console.log('Recording detected: ' + recordingData)
formData.append('videoFile', recordingData, recordingData.name);
}
//Append video from local upload
if (tempFile) {
formData.append('videoFile', tempFile);
}
// Send POST request via AJAX to server
$.ajax({
type: "POST",
url: "/make_vlog/",
processData: false,
contentType: false,
data: formData,
success: function(response) {
alert(response);
//location.href = "/vlogs";
}
});
});``
在服务器端,我有一个django应用程序,它将文件存储为.mp4,并创建一个新的Vlog模型
当我打开页面时,视频被加载,可以由所有浏览器播放。除Safari和iOS设备外,其他设备不播放视频(不支持格式)
当我从文件上传视频而不是网络摄像头录制时。并且该文件是有效的mp4视频(例如,从这里:)该文件在每个设备和浏览器上播放
我认为问题在于我的js代码中的视频编码。同样的问题也发生在.webm文件中。
当我下载webm时,在VLC中转换成mp4并上传到服务器上,视频播放正确
有人有过这样的经历吗?
谢谢您需要将webm视频转换为mp4服务器站点,以便在Safari中播放 在每个浏览器上,以特定的本机格式(mime类型)保存。Safari保存mp4/mp3,而其他浏览器通常保存webm。 更改文件扩展名没有帮助。你需要转换视频
您可以使用ffmpeg服务器端将webm转换为mp4。您需要将webm视频转换为mp4服务器站点,以便在Safari中播放 在每个浏览器上,以特定的本机格式(mime类型)保存。Safari保存mp4/mp3,而其他浏览器通常保存webm。 更改文件扩展名没有帮助。你需要转换视频 您可以使用服务器端的ffmpeg将webm转换为mp4