video 小窗播放 (记)

最近接触到移动端播放视频,着实是头疼了比较长的时间。特此来记录一波,怀念下当初(非常难忘)的日子大哭大哭

 

首先先提醒小伙伴,h5其实是有自己的video播放的(这是最常规的用法):

关于video的参数可以戳这了解下:https://blog.csdn.net/huang100qi/article/details/53405876

(这个视频源也是找的别人的,但是忘了地址了,在此多谢大笑

<video preload='auto'  src='https://www.seastart.tv/introduce.mp4' controls><p> 不支持video</p> </video>

这个就是controls默认的效果,正常来说是可以满足大多数需求(如果不是自定义控制播放、暂停,一定要加上controls,不然只会显示一张图片)。对了,如果只想留下默认的一部分控件,暂时就只能所有的控件都要自己去调API了(具体API可以参考上面的链接),controls目前是不可以让我们选择性的使用。

 

上面的截图也是我心里暗喜,这么简单就能实现。然而“现实”总是如此“多娇”

>>>>>>>>>>>>>>>>>>>>>难   忘   线>>>>>>>>>>>>>>>>>>>>>

 

在微信和qq中播放:

第一个问题:腾讯对非腾讯旗下的视频来源均强制全屏,结果就是视频画质模糊,长宽比例失调(截图太大,就不放了,有兴趣可以试试)

第二个问题:播放完成后,是一个腾讯视频新闻的列表页(对于想展示自家东西的小伙伴,是一件很~~de事,对于用户来说,体验也是很醉人)

所以产品大哥不乐意了(在这致敬所有的产品大哥哭):你能不能让它在当前页面播放,全屏画面都糊了,用户怎么看~~

然后就开始了各种找法子的艰辛历程……

<video preload='auto' id='my-video'  

    src='https://www.seastart.tv/introduce.mp4'  

    webkit-playsinline='true'                            /*这个属性是ios 10中设置可以,让视频在小窗内播放,也就是不是全屏播放*/

    playsinline='true'                                        /*ios微信浏览器支持小窗播放*/

    'x-webkit-airplay='allow'    

    x5-video-player-type='h5'                          /*启用同城播放器*/

    x5-video-player-fullscreen='true'               /*全屏设置,设置为true是防止全屏*/

    x5-video-ignore-metadata='true'

    width='100%' height='100%' controls><p> 不支持video</p> </video>

这样设置完了,其实和别的第三方平台还是有差异的,就是不能在当前页播放,还是会在另一个页面居中播放,但是相比之前的全屏以及广告,产品已经打算放过楼主了哭

 

对了,提一句,看到网上说有用canvas做播放的,楼主试了下,对于页面只有一个视频而言,还是可以试试。但是有多个视频的页面以及有滚动的页面,就很尴尬了,毕竟canvas做出来的页面时不能动的,会很尴尬~

好了,就先记录到这里,以后自己来看应该还会怀念吧……哈哈哈 $_$  $_$

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
车辆进出场录功能需要使用车辆识别系统,如RFID识别设备或摄像头等,来识别车辆的进出场时间和位置。以下是一个简单的示例代码,演示如何使用摄像头识别车辆进出场录: ```c++ #include <opencv2/opencv.hpp> // 包含OpenCV库 #include <iostream> #include <ctime> using namespace std; using namespace cv; int main() { VideoCapture cap(0); // 打开摄像头 if (!cap.isOpened()) { // 判断摄像头是否打开 cout << "Error opening video stream or file" << endl; return -1; } Mat frame; while (true) { cap.read(frame); // 读取摄像头捕获的图像 imshow("Frame", frame); // 显示图像 int key = waitKey(1); // 等待按键事件,延时1ms if (key == 27) { // ESC键退出程序 break; } else if (key == 13) { // 回车键录进出场时间 time_t now = time(0); // 获取当前时间 char* dt = ctime(&now); // 转换为字符串格式 if (frame.empty()) { // 如果图像为空,无法识别车辆 cout << "No vehicle detected" << endl; } else { // 否则识别车辆并录进出场时间 cout << "Vehicle detected at " << dt << endl; } } } cap.release(); // 释放摄像头 destroyAllWindows(); // 关闭所有窗口 return 0; } ``` 这段代码使用OpenCV库打开摄像头,读取摄像头捕获的图像,并显示在窗口中。当用户按下回车键时,可以录车辆的进出场时间,并识别车辆是否存在于图像中。具体的车辆识别算法需要根据具体的场景进行设计和实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值