系列文章目录
文章目录
- 系列文章目录
- 前言
前言
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。
HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。
在不支持 video 元素的浏览器中， 标签中间的内容会显示，作为降级处理。
controls属性
加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
具体参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
这里不使用controls直接使用JS来控制视频的播放和暂停等功能。
实现功能如下：
（1）可以播放，暂停，停止视频。
（2）可以改变播放速度（2倍速度加速播放，一半的速度慢速播放，正常速度播放）
（3）播放时有进度条，同时还能显示已播放时间。
（4）通过改变SRC改变播放的视频内容
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>视频播放控制</title>
</head>
<style>#durationBar{border:solid 1px #164900;width:450px;margin-bottom:5px;}#positionBar{height:20px;color:white;font-weight:bold;background:#2D9900;text-align:center;}
</style><script>//播放function play(){var video = document.getElementById("videoPlayer");video.play();}//暂停function pause(){var video = document.getElementById("videoPlayer");video.pause();}//停止function stop(){var video = document.getElementById("videoPlayer");video.pause();video.currentTime = 0;}//快放function speedUp(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 2;}//慢放function slowDown(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 0.5;}//正常速度function normalSpeed(){var video = document.getElementById("videoPlayer");video.play();video.playbackRate = 1;}//进度条相关function progressUpdate(){var video = document.getElementById("videoPlayer");//动态设置进度条var postionBar = document.getElementById("positionBar");postionBar.style.width = (video.currentTime / video.duration * 100) + "%";//设置播放时间displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒";}function btnChangeA(){const video = document.getElementById('videoPlayer');video.src = 'test.mp4';video.load();video.play();}function btnChangeB(){const video = document.getElementById('videoPlayer');video.src = 'test2.mp4';video.load();video.play();}
</script><body><video controls id="videoPlayer" width="450px" height="300"ontimeupdate="progressUpdate()"></video><div id="durationBar"><div id="positionBar"><span id="displayStatus">0秒</span></div></div><button id="btnChange" onclick="btnChangeA()">播放A</button><button id="btnChange" onclick="btnChangeB()">播放B</button> <button onclick="play()">播放</button><button onclick="pause()">暂停</button><button onclick="stop()">停止</button> <button onclick="speedUp()">快放</button><button onclick="slowDown()">慢放</button><button onclick="normalSpeed()">正常</button>
</body>
</html>
其他说明：
要控制视频从指定时间开始播放，可以使用video元素的currentTime属性。
currentTime属性表示视频当前播放的时间（以秒为单位），可以设置该属性来控制视频从指定时间开始播放。
例如，如果要从视频的第10秒开始播放，可以使用以下代码：
const video = document.getElementById(‘myVideo’);
video.currentTime = 10;
然后，调用video元素的play()方法开始播放视频
poster属性，用于指定视频的预览图
视频无法自动播放
autoplay属性失效
HTML5标准规定：video标签设置autoplay属性后，当页面加载完成时，媒体资源将自动开始播放。
然而，在实际开发过程中发现，给video标签设置autoplay属性，在很多移动设备的浏览器中是无法实现自动播放的。
在iphone上做测试，发现autoplay属性在safari里无效、在微信里有效。
查看苹果开发者中心的文档,发现苹果对video标签的autoplay属性做了如下规定：
In Safari on iOS (for all devices, including iPad),
where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.
因此，在ios系统的safari浏览器中设置autoplay是无效的；
此外很多安卓机浏览器也采用了禁用autoplay的策略。
调用play()方法无效
继续在iphone上做测试，在页面加载完成后调用play()方法，尝试实现自动播放的效果。
发现在safari里视频没有播放，在微信里视频开始播放。
苹果开发者中心的文档同样对ios设备上的safari浏览器中，play()方法的触发时机做了规定：
No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback,
unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad=“play()” event does not.
也就是说，在safari里，需要把play()方法绑定到用户交互事件（eg.onclick,ontouchstart），当用户交互事件触发时，play()才会执行。
如果把play()方法绑定到非用户交互事件（eg.onload）,该事件被触发时play()不会被执行。
![每日一题 --- 移除链表元素[力扣][Go]](https://img-blog.csdnimg.cn/direct/afe0911681234b8b949fc47a9c182aee.png)
