有谁知道如何在视频中插入旋转360度的视频.js
我在这个主题上唯一发现的是 https://github.com/yanwsh/videojs-panorama 我可以写这段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Название страницы</title>
<link rel = "stylesheet" href = "skript/video-js.min.css" />
<script src = "skript/video.min.js"> </script>
<script src="skript2/three.min.js"></script>
<link href="skript2/videojs-panorama.min.css" rel="stylesheet">
<script src="skript2/videojs-panorama.v5.min.js"></script>
<script>
var options = {
plugins: {
panorama: {
clickAndDrag: true,
clickToToggle: true,
autoMobileOrientation: true
}
}
};
var player = videojs('videojs-panorama-player', options, function () {
});
player.panorama({
clickToToggle: true,
PanoramaThumbnail: true,
KeyboardControl: true,
backToHorizonCenter: false,
backToVerticalCenter: false,
clickAndDrag: true,
autoplay: true,
initFov: 70,
maxFov: 70,
minFov: 70,
mobileVibrationValue:0.032,
autoMobileOrientation: true,
VREnable: true,
NoticeMessage: (isMobile()) ? "drag and drop video text",
callback: function () {
if (!isMobile()) player.pause();
}
});
</script>
</head>
<body>
<video
id="videojs-panorama-player"
crossorigin="anonymous"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="1.mp4" type="video/mp4">
</video>
<video
id="videojs-panorama-player"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="https://yanwsh.github.io/videojs-panorama/assets/shark.mp4" type="video/mp4">
</video>
</body>
</html>
但它不起作用
未捕获的语法错误:意外的令牌 2index.html:1 通知消息:(isMobile((( ?"拖放视频文本",
或
未捕获的类型错误:提供的元素或 ID 无效。(视频( at videojs (video.js:21690( 索引.html:47
请告诉我我做错了什么
奇怪的是,网站上一切正常
https://codepen.io/zeni-agentt/pen/JeLqGN
但是在本地主机上给出错误
你必须首先定义播放器,然后player.panorama
工作,像这样:
var player = videojs('videojs-panorama-player', options, function () {
});
player.panorama({
clickToToggle: true,
PanoramaThumbnail: true,
KeyboardControl: true,
backToHorizonCenter: false,
backToVerticalCenter: false,
clickAndDrag: true,
autoplay: true,
initFov: 70,
maxFov: 70,
minFov: 70,
mobileVibrationValue:0.032,
autoMobileOrientation: true,
VREnable: true,
NoticeMessage: (isMobile()) ? "drag and drop video text",
callback: function () {
if (!isMobile()) player.pause();
}
});
选项是一个对象,您可以在那里添加一些配置