Java小强个人技术博客站点    手机版
当前位置: 首页 >> JS >> 使用JavaScript控制<video>视频播放

使用JavaScript控制<video>视频播放

25410 JS | 2023-6-6

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

在不支持 video 元素的浏览器中,<video></video> 标签中间的内容会显示,作为降级处理。

html视频播放video标签.jpg

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>
	&nbsp;&nbsp;
    <button onclick="play()">播放</button>
    <button onclick="pause()">暂停</button>
    <button onclick="stop()">停止</button>
    &nbsp;&nbsp;
    <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()不会被执行。


END

推荐您阅读更多有关于“ js JavaScript 视频 video 播放 ”的文章

上一篇:docker安装ES7.1.1(单机版)+ik分词器+es-head可视化 下一篇:CentOS7虚拟机上配置静态IP和DNS

猜你喜欢

发表评论: