打开网页就播放视频 ，视频播放效果类似背景图片在后面播放这种效果如何实现?
打开网页就播放视频 ，视频播放效果类似背景图片在后面播放
这种效果如何实现
我已经抄过来了没用 YouTube iframe 方案
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>用的是 video.js 处理地
关键自动播放代码片段可实现video.js 加载后自动播放
sources 可 采用 .m38u 视频技术改善视频加载速度
<div id="auto-page-youtube" class=" page-youtube-warp">
<div class="video-wezhi">
<video id="my-video" class="video-js" autoplay="true" controls preload="none" width="1920" height="580" data-setup="{}" loop></video>
</div>
<div class="page-youtube-info">
<h2 class="youtube-title"> WE ARE HunanGL</h2>
<p class="youtube-text"> We manufacture, distribute. develo and market fiber optic products worldwide</p>
</div>
</div>
<script src="node_modules/video.js/dist/video.min.js?v=8.0.4"></script>
<script>
videojs.options.autoplay = true;
// 获取要创建播放器的DOM元素
var videoContainer = document.querySelector('.video-wezhi');
// 创建Video.js播放器实例
var player = videojs('my-video', {
autoplay: true, // 自动播放
muted: true,
controls: true, // 显示播放控制按钮
preload: 'auto', // 预加载视频
width: 1920, // 宽度
height: 580, // 高度
sources: [
{
src: 'https://www.hunangl.com/assets/video/Hunan-GL-Chinese.mp4',
type: 'video/mp4'
}
]
});
// 禁止暂停
player.ready(function() {
this.pause = function() {};
});
//播放成功还是失败钩子函数
player.ready(function() {
var promise = player.play();
if (promise !== undefined) {
promise.then(function() {
// Autoplay started!
}).catch(function(error) {
// Autoplay was prevented.
});
}
});
</script>
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：