热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在原生开发中控制HTML5视频

文章目录前言一、video标记对的属性二、video标记对的方法三、video标记对的事件四、PC端video标记对的问题1、视频如何自动播放2、视频的全屏播放3、视频全屏后导致的

文章目录



  • 前言

  • 一、video标记对的属性

  • 二、video标记对的方法

  • 三、video标记对的事件

  • 四、PC端video标记对的问题



    • 1、视频如何自动播放

    • 2、视频的全屏播放

    • 3、视频全屏后导致的垂直滚动条问题



  • 五、移动端video标记对的问题



    • 1、【IOS】iPhone系列手机中视频的内联播放问题

    • 2、【Android】多个视频同时播放问题

    • 3、在移动端自定义视频的控制按钮

    • 4、补充:移动端如何判断用户设备是IOS设备还是Android设备

    • 5、补充:【IOS】为适配iPhoneX设备制作两套页面



  • 总结




前言

有人可能会问,在如今各种前端框架和开发工具横行的年代,还用得上原生开发吗?作为一名从业18年的前端讲师,我要告诉大家学习原生开发的优点:



  1. 原生开发有助于同学们从原理上认识前端知识,并在本质上学会它。

  2. 原生开发有助于锻炼同学们的编程水平,提高大家对前端知识的理解。

  3. 正所谓万变不离其宗,做过项目开发的人们都知道,无论用什么框架,也是要用到扎实的Javascript功底的。

  4. 以小程序开发为例,如果用户要在小程序中添加一个非常长的页面,有的时候还是需要使用来实现的,这就可能会涉及到原生页面的制作。

今天我就为大家讲一讲在原生开发过程中,标记对遇到的一些问题以及这些问题的解决方案。




一、video标记对的属性

下表中列出了video标记对在开发过程中常用的原生属性。




























































































属性含义JS取值
src设置视频存放的路径及文件名。视频文件的URL地址
controls设置是否显示视频的控制面板。true、false
autoplay设置是否自动播放。true、false
loop设置是否循环播放。true、false
muted设置是否默认静音播放。true、false
volume获取/设置视频的音量大小。0-1
paused获取视频是否处于暂停状态。true、false
ended获取视频是否处于播放结束状态。true、false
duration获取视频的总播放时长。以秒为单位的时间
currentTime获取/设置视频当前播放的时长。以秒为单位的时间
playbackRate获取/设置视频的播放速度。1-正常倍速 2-两倍倍速 0.5-半倍倍速
poster设置视频播放前的封面图地址。封面图的URL地址
width设置视频在页面中显示的宽度范围。数值
height设置视频在页面中显示的高度范围。数值
videoWidth返回视频的原始宽度。数值
videoHeight返回视频的原始高度。数值

二、video标记对的方法

下表中列出了video标记对在开发过程中常用的原生方法。



















方法含义
play()控制视频开始播放。
pause()控制视频暂停播放。

三、video标记对的事件

下表中列出了video标记对在开发过程中常用的原生事件以及事件的触发机制。











































事件触发机制
play当视频开始播放时触发该事件。
pause当视频暂停播放时触发该事件。
ended当视频播放结束时触发该事件。
volumechange当视频音量发生变化时触发该事件。
ratechange当视频播放速度发生变化时触发该事件。
timeupdate当视频播放时间发生变化时触发该事件。
seeking当改变视频播放进度时触发该事件。
seeked当改变视频播放进度结束时触发该事件。

四、PC端video标记对的问题

1、视频如何自动播放

当前的浏览器都已经将视频的自动播放功能去掉了,也就是说在标记对上使用autoplay属性也无法实现视频的自动播放功能。
但是如果为标记对添加上autoplay属性的同时设置其静音播放是可以实现的。

<video src=“video/01.mp4” autoplay muted loop>video>

2、视频的全屏播放

有的视频是要在页面中实现自动全屏播放的,这类视频往往在页面一进入时就能够占据整个屏幕。目的是显示酷炫的视频效果,而不是展示声音,因此可以静音自动播放。

HTML代码如下所示:

<video src=“video/01.mp4” class=“bgVideo” autoplay muted loop>video>

CSS代码如下所示:

.bgVideo{
width:100%;height: 100%;
min-height: 1080px;
object-fit: cover;
}

3、视频全屏后导致的垂直滚动条问题

有的视频由于高度过大,在全屏播放后会在页面中产生垂直滚动条。如果不想让页面产生垂直滚动条,即在一屏中显示所有内容包括视频,则可以按照如下的CSS代码进行设置。

.bgVideo{
position:fixed;
z-index:-1000;
}

五、移动端video标记对的问题

1、【IOS】iPhone系列手机中视频的内联播放问题

使用IOS系统的设备,视频在播放时会自动“竖屏全屏”,也就是说在这类设备中单击视频播放按钮,视频不会在页面原有的位置中“内联播放”,而是会出现类似于全屏的模式。即页面展示为黑色的背景,但是视频在手机竖屏的情况下播放。

这个问题可以通过在标记对中添加属性的方式来解决。



  • IOS10及其以上版本的操作系统可以支持playsinline属性。

  • IOS10以下版本的操作系统只能使用-webkit-playsinline属性。

所以,HTML代码如下所示:

<video playsinline webkit-playsinline>video>

2、【Android】多个视频同时播放问题

一个页面下若有多个视频,这样的情况在Andro系统中可能会出现多个视屏同时播放的现象。
该问题的解决原理:在一个视频的play事件中,将其他所有的视频都暂停掉。

jQuery代码如下所示:

$("video").on("play",function(){
var reg=/android/i;
if(reg.test(navigator.userAgent)){
var currentVideo=$(this).get(0);
for(var i=0;i<$("video").length;i++){
if($("video").get(i)!==currentVideo){
$("video").get(i).pause();
}
}
}
})

注意:在视频的play事件中不要再调用play()方法,以免产生堆栈溢出。


3、在移动端自定义视频的控制按钮

对于不显示系统原生控制面板的视频,使用自己制作的元素来控制视频的播放与暂停。

jQuery代码如下所示:

$(".control").on("touchstart",function(){
var node=$(this).next().get(0);
if(node.paused){
node.play();
$(this).find("img").css("display","none");
}else{
node.pause();
$(this).find("img").css("display","inline");
}
}).on("touchend",function(){
var node=$(this).next().get(0);
node.muted=false;
})

注意:此时视频在HTML文档中必须设置为静音状态。


4、补充:移动端如何判断用户设备是IOS设备还是Android设备

使用navigator.userAgent属性来判断返回值当中是否带有特定的字符串。

(1)判定Android设备:

var reg=/android/gi;
if(reg.test(navigator.userAgent)){
console.log(“这是Android设备”);
}

(2)判断IOS设备:

var reg=/(iphone)|(ipad)|(ipod)/gi;
if(reg.test(navigator.userAgent)){
console.log(“这是ISO设备”);
}

5、补充:【IOS】为适配iPhoneX设备制作两套页面

由于iPhoneX及其以上的设备高度远远大于iPhoneX以下的产品(高度大于812px),因此对于具有全屏背景的页面需要为大高度的设备再做一套页面,或者判断设备加载不同的背景图片。

那么如何判断IOS设备是否是iPhoneX以上的设备呢?代码如下所示。

if(screen.height>=812){
//iPhoneX系列的大高度设备
location.href=“indexX.html”;
}



总结

相对来说,视频效果再原生开发过程中的情况还是比较复杂的,同学们在接触这类项目时,应该多积累具体问题的解决方案,这样才能触类旁通,让自己变成项目经验丰富的程序员。

本文地址:https://blog.csdn.net/web_front_hai/article/details/110540795



推荐阅读
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
  • Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案
    本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • Flutter 2.* 路由管理详解
    本文详细介绍了 Flutter 2.* 中的路由管理机制,包括路由的基本概念、MaterialPageRoute 的使用、Navigator 的操作方法、路由传值、命名路由及其注册、路由钩子等。 ... [详细]
  • 数字资产量化交易通过大数据分析,以客观的方式制定交易决策,有效减少人为的主观判断和情绪影响。本文介绍了几种常见的数字资产量化交易策略,包括搬砖套利和趋势交易,并探讨了量化交易软件的开发前景。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]
  • 解决Win10下MySQL连接问题:Navicat 2003无法连接到本地MySQL服务器(10061)
    本文介绍如何在Windows 10环境下解决Navicat 2003无法连接到本地MySQL服务器的问题,包括启动MySQL服务和检查配置文件的方法。 ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
author-avatar
琪琪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有