简单的视频、音频播放、Uncaught TypeError: $(...).play is not a function

在H5中 视频音频是不能用直接加载完自动播放的
解决方法:
一、需要用按钮执行下操作:
知识点:js控制媒体

play()播放

pause()暂停

load()重新加载
如下例代码:

 <audio id="aud" src="../images/25a6_b1be_6839_45fbf93c9a2711793f685617c824bdd7.mp3" controls autoplay ></audio>
 <button onclick="show_video()">开始</button>
 <button onclick="stop_video()">暂停</button>
   <script>
   		//获取播放标签的ID
      	var x = document.getElementById("aud");
		//开始按钮
        function show_video() {
            x.play();
            console.log('开始播放');
             // 当播放完成时执行的函数  此处的 aud 是绑定音频的ID
             aud.onended = function () {
                console.log('完成');
            }
        }
		//暂定按钮
        function stop_video() {
            x.pause();
        }
		
    </script>

注意:
如果不想有触发事件,直接执行的话,那么会报一行错误:
Uncaught TypeError: $(…).play is not a function

特别注意:不能套用定时方法,可能你在电脑上或部分手机没有问题,但是苹果自带及QQ浏览器等是失效的!!!
当然如果有大神解决了,下方留个言,诚心请教~

二、如果你只想让视频自动播放,可以接受***没有声音***,那么直接加上 muted 属性即可:

<video id="vid" src="__STATIC__/img/67f0dc8750e38b3499c46040a72829.mp4"  autoplay='autoplay' muted='muted'></video>

三、还有一种就是我之前看到的一些大牛自己写的一些脚本,太久了记不住了,地址也找不到了,如果有看到的不要忘记下面留言~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值