html5 video 移动开发二(js控制 video 开始暂停,全屏等功能)

var video=document.getElementById("myPlayer");

进入全屏js控制:

//谷歌(webkit内核浏览器)

video.webkitRequestFullScreen()

//火狐

video.mozRequestFullScreen();

在火狐浏览器测试时,遇到:

请求全屏已拒绝,Element.requestFullscreen() 不是从短期运行的用户生成的事件处;

找了半天问题,结果是直接通过a标签href属性调用方法就会输出这个错误,直接给元素绑定事件就可以了

//欧朋

video.oRequestFullScreen()

//IE(IE浏览器记得screen 的s一定是小写,否则调用不成功)

video.msRequestFullscreen() 

//苹果手机,为什么不是webkitRequestFullScreen(),一个字母之差害死人

video.webkitEnterFullscreen()

声音控制

       if(video.muted){
            video.muted=false;//打开声音
        }else{
            video.muted=true;//关闭声音
        }

开始/暂停播放

if(video.paused){
     video.play();//开始播放
}else{
     video.pause();//暂停播放
}


 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML5 Video可以添加属性,实现视频自动全屏功能。需要使用“autoplay”, “playsinline”和“muted”属性。其中: - “autoplay”属性可以设置视频自动播放完成。 - “playsinline”属性可以指明视频是否在页面中播放。 - “muted”属性可以设置视频是否静音播放。 完整的HTML5 Video代码示例如下: ``` <video autoplay playsinline muted> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> ``` 需要注意的是,自动全屏功能虽然方便,但也会影响用户体验。如果用户不希望视频全屏播放,还需提供关闭功能。 另外,自动全屏功能在移动设备上表现不一。iOS设备需要用户手动点击播放按钮后才能全屏播放,在Safari中使用“allowfullscreen”属性可实现。Android设备则默认支持自动全屏播放。在不同设备和浏览器中进行测试,确保视频播放的体验最佳。 ### 回答2: HTML5是网页开发中的一个重要技术,它可以在网页中嵌入视频,方便用户观看视频内容。而对于视频自动全屏播放,仍然是用户和Web开发者所关注的问题之一。在HTML5中,可以通过添加一些属性来控制视频的自动全屏播放。 首先,我们需要使用HTML5video标签来嵌入视频。在video标签中,我们可以设置autoplay属性,使视频在网页加载后自动播放。此外,我们还需要设置muted属性,这会让视频自动静音播放。这是为了避免出现声音播放时对用户造成干扰的情况。 下面是一种实现视频自动全屏的代码示例: ``` <video id="video" autoplay muted style="width:100%;height:100%;"> <source src="video.mp4" type="video/mp4"> </video> <script> var video = document.getElementById('video'); video.addEventListener('click', function () { video.webkitRequestFullScreen();//webkit内核浏览器 }) </script> ``` 这种方式需要用户手动操作单击视频,然后使用JavaScript调用浏览器的全屏API,并使用CSS在嵌入式视频播放器上设置全屏样式。注意,这种方式只在Webkit内核浏览器中适用。 同时,还可以使用第三方库实现自动全屏播放功能,比如video.js。通过使用这种库,可以较为简单地实现视频的自动全屏播放功能,而无需考虑浏览器兼容性。 下面是一个基于video.js的自动全屏播放的代码示例: ``` <!DOCTYPE html> <html> <body> <video id="my_video" class="video-js vjs-default-skin" autoplay muted controls preload="auto" width="100%" height="480" poster="http://vjs.zencdn.net/v/oceans.png"> <source src="video.mp4" type="video/mp4"> </video> <script src="video.js"></script> <script> var player = videojs('my_video'); player.requestFullscreen(); </script> </body> </html> ``` 在这个示例中,我们使用video.js库来实现自动全屏播放,只需要在JavaScript中添加一个requestFullscreen()方法,可以使视频自动全屏播放。同时,我们还设置了poster属性来显示封面图片。 总之,通过上述方式可以轻松实现HTML5视频的自动全屏播放功能。不过一定要根据实际需求合理选择不同的方式,以达到最优的播放效果。 ### 回答3: HTML5可以使用<video>标签来实现视频播放,其中一个功能就是全屏播放。通常情况下,用户需要手动点击视频播放器上的全屏按钮才能进入全屏模式。但是有时候为了提高用户体验,需要使用JS代码控制视频自动全屏。 方法一:在页面加载完毕后使用JS代码自动触发点击全屏按钮。 该方法的实现需要注意以下几点: 1. 要在页面加载完毕后才能触发,否则全屏可能无法生效。 2. 必须先播放视频,再尝试进入全屏模式,否则全屏也可能无法成功。 3. 可以使用jQuery或原生JS实现。 代码实现: //jQuery实现 $(document).ready(function(){ var video = $('#myVideo')[0]; video.play(); video.webkitEnterFullScreen(); }); //原生JS实现 window.onload = function(){ var video = document.getElementById('myVideo'); video.play(); video.webkitEnterFullScreen(); }; 方法:使用Fullscreen API 除了上述方法,还可以使用Fullscreen API来实现视频自动全屏,该方法支持Chrome、Firefox和IE 11以及更高版本浏览器。 代码实现: var video = document.getElementById('myVideo'); if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } video.play(); 需要注意的是,Fullscreen API需要在用户操作的情况下才能生效,例如鼠标点击或键盘按下。如果直接使用JS代码触发,浏览器可能会出现安全问题,无法全屏

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值