全屏视频播放页的简单处理

最新推荐文章于 2024-06-03 17:36:50 发布
置顶 最新推荐文章于 2024-06-03 17:36:50 发布
阅读量2k 收藏
点赞数 1
分类专栏： html 文章标签： html 视频播放页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangji5850/article/details/50886859
版权

如图：

这里写图片描述

Html：

<!DOCTYPE html>
<html style="height:100%">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link type="text/css" rel="stylesheet" href="../css/website.min.css" />
    <link rel="stylesheet" href="../css/jquery.mCustomScrollbar.min.css">
    <title>
        cima
    </title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <script type="text/javascript">
        var IS_LOCAL = true;var hasLogined = false;
    </script>
</head>

<body style="height:100%">
    <div class="section_wrap" style="height:100%">
        <div class="relatv full_screen video">
            <div class="clearfix relatv play_area">
                <p class="abs video_info">
                    <span class="dis_ib name">纳税评估常用指标与实际案例分析 I3-5 财务3 </span>
                    <span class="progs">正在学习：<i class="now c_blue">1课时</i>/100课时</span>
                </p>
                <div class="video_src">
                    <object width="100%" height="99%" type="application/x-shockwave-flash" data="http://player.polyv.net/videos/player.swf" id="9b038edc87e330f329463d2a5de38330_9" class="polyvFlashObject"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><param name="flashvars" value="start=0&amp;end=176&amp;ban_history_time=on&amp;watchStartTime=0&amp;vid="></object>
                </div>
            </div>
            <div class="abs main_r">
                <div class="abs link">
                    <a class="trans1 menu curr" href="javascript:;" data-id="1"><span class="no_dis go_next">切换到下一节</span><i class="ico"></i>目录</a>
                    <a class="trans1 note" href="javascript:;" data-id="2"><i class="ico"></i>笔记</a>
                    <a class="trans1 discuss" href="javascript:;" data-id="3"><i class="ico"></i>讨论</a>
                    <a class="trans1 community" href="javascript:;" data-id="4"><i class="ico"></i>社区</a>
                </div>
                <div class="abs control"><i class="abs ico"></i></div>
                <div class="cont main_cont">
                    <ul class="ul for_menu">for_menu
                    </ul>
                    <div class="ul sp_ul for_note">for_note
                    </div>
                    <div class="ul sp_ul for_discs">for_discs
                    </div>
                    <div class="ul sp_ul for_comty">for_comty
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.main_r .link').on('click', 'a', function() {
            var _t = $(this);
            _t.addClass('curr')
                .siblings().removeClass('curr');
            $('.main_r .cont .ul').eq(_t.index()).show()
                .siblings().hide();
        });
        //右侧展开收起
        $('.full_screen .main_r').on('click', '.control', function() {
            if(!$('.full_screen').hasClass('has_spread')) {
                $(this).parent().css("width","0");
                $('.full_screen').css("padding-right","15px");
                $('.full_screen').addClass('has_spread')
            }else {
                $(this).parent().css("width","300px");
                $('.full_screen').css("padding-right","315px");
                $('.full_screen').removeClass('has_spread');
            }
        });
    });

    </script>
</body>

</html>

Css：

.relatv{position: relative;z-index: 1;}
.section_wrap{min-width: 1200px;}
.full_screen{padding-right: 315px;min-height: 320px;min-width: 885px;height: 100%;}
.play_area{background-color: #000;height: 100%;}
.full_screen .main_r{background-color: #000; right: 0;top: 0;z-index: 20;height: 100%;width: 300px;}
.video .main_r .link{left: -52px;top: 50%;z-index: 25;height: 223px;margin-top: -111.5px;}
.video .main_r .link .go_next{background-color: #444;color: #999;text-align: center;width: 100px;}
.video .main_r .link a{background-color: #676767;color: #fff;display: block;height: 37px;line-height: 37px;overflow: hidden; width: 37px;margin-bottom: 20px;}
.video .main_r .link .ico{height: 37px;width: 37px;vertical-align: top;}
.video .main_r .link a.curr{background-color: #0097DD;width: 37px;}
.video .main_r .link a:hover, video .main_r .link a.menu.curr:hover{background-color: #0097DD;margin-left: -37px; width: 74px;}
.full_screen .main_r .control{background-color: #292929;cursor: pointer;left: -15px;top: 0;z-index: 25;height: 100%;overflow: hidden; width: 15px;}
.video .main_r .main_cont, .video .main_r .main_cont .sp_ul{height: 100%;overflow: auto;width: 100%;}
效果预览 http://www.xuecima.com/course/view/44

ps:由于域名问题，此链接有可能失效。

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。
-T先生-
关注
专栏目录
小视频单页播放源码.zip
05-08
简介这是一款随机播放小姐姐视频的html单页源码哈，随机播放抖音和快手。安装 上传主机或服务器解压访问域名即可
videoUI视频切换播放和全屏播放微信小程序
08-10
videoUI 视频切换播放和全屏播放 微信小程序
视频播放页面
Qiao_Hai的博客
03-16 707
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt; &lt;% String path =
vue中用 video.js 实现单个页面内多视频播放.zip
02-19
vue中用 video.js 实现单个页面内多视频播放 1、index_v01.vue 实现单页面内多视频播放，如效果图； 2、index_v02.vue 实现单页面内多视频播放，可视区域内的视频播放，不在可视区域内的暂停。 以防止在视频量大的情况下，页面压力过大。
前端 video 实现全屏播放
最新发布
Ruiqi8的博客
06-03 302
只需要加上这句代码就行。
visual c++ vc全屏播放视频.zip
01-30
总之，这个项目包展示了如何使用Visual C++和MFC来创建一个全屏视频播放器。开发者不仅需要熟悉C++语言，还要掌握Windows API和MFC框架，以及可能的视频播放技术，如DirectX或WMP。这个项目对于学习和实践Windows...
Android如何让WebView中的HTML5页面实现视频全屏播放
08-30
在Android开发中，有时我们需要在应用中嵌入网页内容，...需要注意的是，这只是一个基础的实现，实际应用中可能还需要处理其他细节，比如处理视频的控制栏显示、音量控制等，但上述步骤已经覆盖了基本的全屏播放功能。
jQuery全屏背景视频播放特效特效代码
03-20
jQuery全屏背景视频播放特效是一种常见的网页设计技术，它能够为网站添加动态视觉效果，提升用户体验，让网页更具吸引力。这种特效通常是通过JavaScript库，尤其是jQuery来实现的，因为jQuery提供了一套简单易用的...
WPF 全屏播放视频 Demo
01-27
在Windows Presentation Foundation（WPF）中，全屏播放视频是一个常见的需求，特别是在开发多媒体应用程序时。这个"**WPF 全屏播放视频 Demo**"应该包含一个示例项目，演示了如何利用WPF的MediaElement控件实现视频...
listview列表视频播放，支持全屏，上滑暂停播放等
04-15
当涉及到在ListView中集成视频播放功能时，开发者需要处理一系列技术问题，比如如何实现流畅的滚动、视频的自动暂停与恢复，以及全屏模式的切换。在这个项目中，"listview列表视频播放，支持全屏，上滑暂停播放等"，...
单页面视频弹出播放响应式网页模板
01-22
单页面视频弹出播放响应式网页模板
VXG视频框架下RTSP,RTMP视频流播放单页多屏Demo(Eclipse版)
07-13
VXG视频框架下RTSP,RTMP视频流播放单页多屏Demo(Eclipse版),用于Android手机摄像头视频流的多通道直播
实现全屏的WebHTML5视频背景
08-10
全屏的Web HTML5视频背景，HTML5 Background Video
【前端】视频video标签 全屏功能
qq_45236230的博客
08-11 1122
不同浏览器要不同的前缀 坑的一匹 //这个函数 就是绑定了按钮的函数 var fullScreenHandler=function(){ if (isElementFullScreen()){ exitFullscreen(); } else{ FullScreen(); } }; //进入全屏 function FullScreen() { var ele = video_class; // 注意 这里要填一个容器 就是你要让他全屏的容器 if (ele.request
用户体验之“媒体播放页的设计”
Web前端攻城虱
01-17 2030
在网页上嵌入一个播放器，播放一段视频。因为网页里面的播放器是一个浏览器插件，而这个插件的运转的效率会影响整个浏览器的效率（甚至会拖累整个操作系统） 。多媒体广告与js网页脚本也会影响整个浏览器的性能。当用户不能“好好地”呆在你这个页面的时候，也就是用户体验非常差的时候。主要例子如各大视频网站。那么综合以上几点：1.播放的视频必须合理地压缩；一般的，像一些专业网站播放专业的视频，往往是内容比
仿今日头条视频播放页（使用BottomSheetDialogFragment）
天麟江的博客
07-17 1954
仿今日头条视频播放页，实现效果如下图： 可以拖动使之消失，也可以点击空白处使之消失，是不是很有趣呢？ 第一次看到这种效果的时候，我直接蒙蔽了，这样要是用自定义ViewGroup来实现的话需要考虑一堆问题，然而，“上帝给我们关上一扇门的时候，一定为我们开了一扇窗！”，经过查阅大量的资料，发现在Google提供的Design包中有现成的可以实现相应效果的控件： BottomSheetDi
微信小程序视频全屏显示4种方式
sam的博客
04-25 9338
视频全屏显示4种方式 示例库 代码片段
uniapp小程序点击按钮打开图片/全屏播放视频组件
greendx的博客
11-22 4133
uniapp小程序点击按钮打开图片/全屏播放视频组件
让弹出层始终显示在屏幕正中间
热门推荐
皮哥不皮
03-29 4万+
一、block元素相对于父级居中：给该元素设置宽高(如果被内部元素撑开，也可不写)；然后设置样式margin:0 auto;二、inline元素相对于父级居中：给父级元素设置样式：text-align:center;三、弹层相对于浏览器窗口（或屏幕）居中：可将弹层对应的dom作为body第一层子元素，然后给弹层设置样式
pyqt opencv 双击lable全屏播放视频
08-29
### 回答1： 可以使用PyQt5和OpenCV来实现在label上播放视频，并且支持全屏播放。你可以使用QLabel控件作为视频播放的容器，并在其上显示帧。以下是实现全屏播放的基本步骤： 1. 定义一个QMainWindow窗口，并将其设置为全屏模式。 2. 创建一个QWidget，将其设置为主窗口的中央widget。 3. 在QWidget上创建一个QLabel控件，用于显示视频帧。 4. 使用OpenCV打开视频文件，并逐帧读取视频帧。 5. 将每一帧转换为QImage格式，并在QLabel控件上显示。 6. 添加一个双击事件处理程序，用于将视频切换到全屏模式。 下面是一个简单的示例代码： ```python import sys import cv2 from PyQt5.QtGui import QImage, QPixmap from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QLabel from PyQt5.QtCore import Qt class VideoPlayer(QMainWindow): def __init__(self, parent=None): super(VideoPlayer, self).__init__(parent) self.setWindowTitle('PyQt5 OpenCV Video Player') self.setWindowState(Qt.WindowFullScreen) widget = QWidget() self.setCentralWidget(widget) self.label = QLabel(widget) self.label.setAlignment(Qt.AlignCenter) self.timer = None self.video = cv2.VideoCapture('video.mp4') self.fps = int(self.video.get(cv2.CAP_PROP_FPS)) self.play() self.label.mouseDoubleClickEvent = self.toggle_fullscreen def play(self): ret, frame = self.video.read() if ret: rgb_image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) h, w, ch = rgb_image.shape bytes_per_line = ch * w q_image = QImage(rgb_image.data, w, h, bytes_per_line, QImage.Format_RGB888) pixmap = QPixmap.fromImage(q_image) self.label.setPixmap(pixmap.scaled(self.label.size(), Qt.KeepAspectRatio)) self.timer = self.startTimer(1000//self.fps) def toggle_fullscreen(self, event): if self.isFullScreen(): self.showNormal() else: self.showFullScreen() def timerEvent(self, event): self.play() if __name__ == '__main__': app = QApplication(sys.argv) player = VideoPlayer() player.show() sys.exit(app.exec_()) ``` 这个示例代码使用VideoCapture对象打开名为“video.mp4”的视频文件，并使用QLabel控件在窗口上显示每一帧。使用双击事件处理程序，您可以将视频切换到全屏模式，并在需要时退出全屏模式。 ### 回答2： 要实现在PyQt和OpenCV环境下双击QLabel全屏播放视频，可以按照以下步骤进行： 1. 导入所需的库和模块： ```python from PyQt5 import QtWidgets, QtGui import cv2 ``` 2. 创建一个继承自QLabel的自定义类，用于显示视频： ```python class VideoLabel(QtWidgets.QLabel): def __init__(self, parent=None): super(VideoLabel, self).__init__(parent) self.setScaledContents(True) def mouseDoubleClickEvent(self, event): self.parent().toggleFullScreen() # 双击后切换全屏状态 def resizeEvent(self, event): self.parent().updateVideoFrame() # 窗口大小改变时更新视频帧 ``` 3. 创建一个继承自QMainWindow的主窗口类，并在其中添加视频标签： ```python class MainWindow(QtWidgets.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.videoLabel = VideoLabel(self) # 创建视频标签 self.setCentralWidget(self.videoLabel) # 设置为中心部件 self.videoCapture = cv2.VideoCapture('video.mp4') # 打开视频文件 self.updateVideoFrame() # 初始化视频帧 def updateVideoFrame(self): ret, frame = self.videoCapture.read() # 读取视频帧 if ret: h, w, ch = frame.shape image = QtGui.QImage(frame.data, w, h, ch * w, QtGui.QImage.Format_RGB888) self.videoLabel.setPixmap(QtGui.QPixmap.fromImage(image)) def toggleFullScreen(self): if self.isFullScreen(): self.showNormal() # 退出全屏 else: self.showFullScreen() # 进入全屏 ``` 4. 创建并启动应用程序： ```python if __name__ == '__main__': import sys app = QtWidgets.QApplication(sys.argv) mainWindow = MainWindow() mainWindow.show() sys.exit(app.exec_()) ``` 通过以上步骤，我们可以在PyQt和OpenCV环境下创建一个能够双击QLabel全屏播放视频的应用程序。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值