在原生HTML视频元素中只显示全屏按钮,可以使用JavaScript来实现。具体的步骤如下:
- 首先,获取到视频元素的引用。可以使用document.getElementById()方法或其他选择器来获取video元素。
- 使用视频元素的controls属性来显示默认的视频控制面板。例如,将video元素的controls属性设置为true:video.controls = true;
- 创建一个全屏按钮元素。可以使用document.createElement()方法来创建一个新的按钮元素。例如,创建一个按钮元素:var fullscreenButton = document.createElement('button');
- 给全屏按钮添加一个图标或者文本。可以使用innerHTML属性来设置按钮元素的内容。例如,给按钮元素添加一个全屏图标:fullscreenButton.innerHTML = '<i class="fa fa-expand"></i>';
- 为全屏按钮添加点击事件监听器。使用addEventListener()方法来为按钮元素添加一个click事件的监听器,当按钮被点击时触发全屏功能。例如,添加一个点击事件监听器:fullscreenButton.addEventListener('click', toggleFullScreen);
- 实现全屏功能。定义一个toggleFullScreen函数来实现全屏功能。在该函数中,使用video元素的requestFullscreen()方法来请求进入全屏模式。例如,实现toggleFullScreen函数:function toggleFullScreen() {if (video.requestFullscreen) {video.requestFullscreen();} else if (video.mozRequestFullScreen) {video.mozRequestFullScreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();}}
- 将全屏按钮添加到视频元素中。使用appendChild()方法将全屏按钮元素添加到视频元素的控制面板中。例如,将按钮添加到视频元素中:video.appendChild(fullscreenButton);
这样,当页面加载完成时,视频元素将显示默认的控制面板,同时添加了一个全屏按钮。当用户点击全屏按钮时,视频将进入全屏模式。
推荐的腾讯云相关产品:腾讯云点播(云点播是一款适用于各行业场景的一站式音视频处理与分发解决方案,提供可靠高效的音视频上传、转码、存储、播放、分发服务)。
产品介绍链接地址:https://cloud.tencent.com/product/vod