【h5 video】 播放与暂停 静音与取消静音

news/2024/11/30 0:42:23/

我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止。我的代码是这样的:
$('#playMovie1').click(function(){
$('#movie1').play();
});
但发现这样不行,而用以下的js是可以的:document.getElementById('movie1').play();

解决方法:
play并不是jQuery的函数,而是DOM元素的函数,所以我们需要通过DOM来调用play,代码如下:
$('#videoId').get(0).play();

最简单的方法实现Play和Pause:
$('video').trigger('play');
$('video').trigger('pause');

点击视频就能播放和暂停

$("video").trigger("play");$("video").addClass('pause');$('video').click(function() {if ($(this).hasClass('pause')) {$("video").trigger("play");$(this).removeClass('pause');$(this).addClass('play');} else {$("video").trigger("pause");$(this).removeClass('play');$(this).addClass('pause');}
})

静音和取消静音

var myVid = document.getElementById("video");
$('.sound-icon').click(function() {var sta = myVid.muted;if (sta == true) {myVid.muted = false;} else {myVid.muted = true;}
})

HTML 5中播放视频的方法:

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer><p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

自动播放:
<video src="abc.mov" autoplay></video>

使用poster在视频无法加载时显示图片:

<video width="640" height="360" src="google_main.mp" autobuffer controls poster="whale.png"><p>Try<a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

http://www.ppmy.cn/news/363592.html

相关文章

直播平台开发过程中关于谷歌fcm推送介绍

在直播平台开发中要集成谷歌fcm,首先需要满足一下条件&#xff1a; 1、设备必须是android4.0以上&#xff0c;Google Play Services 必须是 11.2.0以上版本 2、Android SDK Manager 必须有Google Play services SDK 3、Android Studio必须是1.5以上版本 4、用户手机必须可以连得…

直播预告|谷歌 2020 校园空宣(技术类)报名正当时!

2020 上半年最值得期待的 谷歌技术类校园空宣 持续开放报名中。 跟随我们的脚步&#xff0c; 让你提前了解 谷歌中国校园人才的筛选流程与技术期望&#xff0c; 走入谷歌丰富的技术生态社群&#xff0c; 提升实力&#xff0c;稳步向前&#xff01; 线上直播 5 月 15 日 19 时 限…

webrtc直播音频无法静音

现在直播越来越火&#xff0c;然而好的直播框架代码是很重要的&#xff0c;webrtc是谷歌开源的一个直播框架&#xff0c;集成简单功能较全&#xff0c;是一个较好的选择。 然而在直播开发过程中发现一个问题&#xff0c;就是webrtc直播的声音无法静音。在调节音量的的时候就能…

Google I/O 2021 中文直播全攻略,即刻收藏

5 月 19 日凌晨 00:40 (明天晚上) Google I/O 2021 将正式开幕 今年大会以 "全线上" 形式强势回归 让您足不出户&#xff0c;享受科技盛宴 更有实时中文翻译&#xff0c;为您第一时间带来 创新科技灵感和前沿产品资讯 精彩内容不容错过 赶紧调好闹钟 准时和全球开发…

VideoJS 网页直播实现默认静音

在开发 LiveQing高性能流媒体服务器 网页直播多分屏的时候, 产品提出议建说, 能不能在多分屏的时候, 默认静音状态. 因为多分屏界面, 如果声音打开, 好多个直播画面同时发出声音太过嘈杂, 体验不好. 我表示赞同. 心想, 这个应该不难处理吧, 结果踩到一个 video-js-swf 的坑, 在…

统信操作系统 摄像头驱动程序

ubuntu: 安装 摄像头驱动 UVC 购买摄像头的时候知道了大部分摄像头不支持Linux系统。经过陶大佬的指点&#xff0c;发现可以通过安装cheese来激活Ubuntu自带的摄像头驱动&#xff08;UVC&#xff09;。 Tutorial 首先&#xff0c;查看自己要购买的摄像头是否支持 UVC驱动 。 如…

电脑用什么软件可以测试网速吗,在电脑上怎么测试网速_两种快速测试网速的方法介绍 - 驱动管家...

如果电脑安装的是最新的Windows 10系统&#xff0c;要如何测试电脑网速呢&#xff1f;Win10网速测试的问题&#xff0c;今天小编就为大家带来了2种Win10电脑网速测试方法&#xff0c;希望对电脑爱好者朋友有所参考&#xff0c;此方法同样适合XP/Win7/Win8等系统。 一、在线网速…

LINUX摄像头驱动分析

背景&#xff1a;RK3288 MIPI OV摄像头 V4L2框架 一.RK MIPI 二.V4L2框架 现在&#xff0c;从设备树开始&#xff0c;分析video0是如何构建起来的。 rk3399-linux.dtsi: compatible "rockchip,rk3399-cif-isp";在驱动目录下查找rockchip,rk3399-cif-isp 在medi…