热门标签 | 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



推荐阅读
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 本文详细介绍了iOS应用的生命周期,包括各个状态及其转换过程中的关键方法调用。 ... [详细]
  • 在尝试加载支持推送通知的iOS应用程序的Ad Hoc构建时,遇到了‘no valid aps-environment entitlement found for application’的错误提示。本文将探讨此错误的原因及多种可能的解决方案。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
  • 如何在PHP中安装Xdebug扩展
    本文介绍了如何从PECL下载并编译安装Xdebug扩展,以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]
  • importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • 解决Visual Studio Code中PHP Intelephense误报问题
    PHP作为一种高度灵活的编程语言,其代码结构可能导致Intelephense插件在某些情况下报告不必要的错误或警告。自1.3.3版本起,Intelephense引入了多个配置选项,允许用户根据具体的工作环境和编程风格调整这些诊断信息的显示。 ... [详细]
  • 本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ... [详细]
  • 本文详细介绍了C++中的构造函数,包括其定义、特点以及如何通过构造函数进行对象的初始化。此外,还探讨了转换构造函数的概念及其在不同情境下的应用,以及如何避免不必要的隐式类型转换。 ... [详细]
  • 深入解析WebP图片格式及其应用
    随着互联网技术的发展,无论是PC端还是移动端,图片数据流量占据了很大比重。尤其在高分辨率屏幕普及的背景下,如何在保证图片质量的同时减少文件大小,成为了亟待解决的问题。本文将详细介绍Google推出的WebP图片格式,探讨其在实际项目中的应用及优化策略。 ... [详细]
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社区 版权所有