video 手动 播放 全屏
<video ref="videoPlayer" id="my-video" preload="meta" height="200px" width="300px" data-setup="{}" autoplay
controls
>
<source src="@/assets/cs.mp4" type="video/mp4" /> </video> <button @click="playVideo">播放</button> <button @click="pauseVideo">暂停</button> <button @click="toggleFullScreen">全屏</button>
toggleFullScreen() {
let video = this.$refs.videoPlayer;
if (video.requestFullscreen) {
video.requestFullscreen().catch((err) => {
console.error(err);
});
} else if (video.mozRequestFullScreen) {
/* Firefox */
video.mozRequestFullScreen().catch((err) => {
console.error(err);
});
} else if (video.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
video.webkitRequestFullscreen().catch((err) => {
console.error(err);
});
} else if (video.msRequestFullscreen) {
/* IE/Edge */
video.msRequestFullscreen().catch((err) => {
console.error(err);
});
}
},
playVideo() {
console.log(this.$refs.videoPlayer);
this.$refs.videoPlayer.play();
},
pauseVideo() {
this.$refs.videoPlayer.pause();
},
监听
mounted() {
//this.getDataFn()
var video = document.getElementById("my-video");
var last = 0;
//当目前的播放位置已更改时
video.ontimeupdate = function () {
var current = video.currentTime;
if (current - last > 2) {
//此处是限制跳过几秒 可调整
video.currentTime = last;
} else {
last = current;
}
};
video.onended = function () {
console.log("视频播放完成");
};
},
当前播放时长
// 假设你的video元素的id是"myVideo"
var video = document.getElementById("myVideo");
var currentTime = video.currentTime; // 获取当前播放时间(秒)
console.log("当前播放时间: " + currentTime + " 秒");
<script> var player = videojs('my-video'); player.on('timeupdate', function() { var currentTime = player.currentTime(); // 获取当前播放时间(秒) console.log("当前播放时间: " + currentTime.toFixed(2) + " 秒"); }); </script>
或者
video.addEventListener('loadedmetadata', function() {
// 当视频的元数据已加载后获取当前播放时间
var currentTime = video.currentTime;
console.log('当前播放时间: ' + currentTime + '秒');
});

浙公网安备 33010602011771号