html5 video tag

http://www.dotblogs.com.tw/larrynung/archive/2012/02/11/68877.aspx

http://wenku.it168.com/d_000589155.shtml

 

http://www.silverlightchina.net/html/HTML_5/study/2012/0613/16695.html: 可能可以解决目前jb不能playhtml5 video的问题。

 

andoid4.2上播放html5的video有点限制。比如目前限制在http/https协议。本地的就不行。

另外, chrome浏览器可以直接播放, 且窗口大小符合video tag中的设置。但是webview应用使用的时候需要设置chromeclient, webview html5 video java中是需要检查和使用这个chromeclient的。 即使这样, video会全屏播放, 而且会被webview页面遮挡。 前面连接里有说怎样去掉遮挡。暂时不知道如何解决全屏问题。看了一下chrome browser的chromclient, 没有有价值的发现。

 

chrome浏览器使用awesomeplayer.

webview应用使用其他player。

可能两个player的差异, 造成只能全屏的问题。

 >在去除只能全屏的player之后, webview应用也使用awesomeplayer, 这时也可以非全屏。 看来这是player的差异造成的。 原先那个player只能全屏播放。

 

webview使用的是c++层的webkit的android provate. 这会通过jni调用回java的webkit的html5video, 再通过java层的player调用到c++层的mediaplayerservice。

 

 

 http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx: 关于html5的video应用的一个不错的例子。我根据这个解决了视频切换的问题。

 http://www.360doc.com/content/13/0518/09/12329484_286259704.shtml:html5 video支持的情况

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值