如何将360视频插入视频.js



有谁知道如何在视频中插入旋转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();
}
});

选项是一个对象,您可以在那里添加一些配置

最新更新