html5 默认的 video

基本的video写法如下,建议3个属性,src是video地址,controls是浏览器为视频提供播放控件,poster是视频下载时显示的图像,或者在用户点击播放按钮前显示的图像,如果未加入poster属性,在部分机型上不会预读视频文件,显得不友好。

<video src="movie.ogg" controls="controls" poster="test.jpg" id="video1">
您的浏览器不支持 video 标签。
</video>

video 支持的事件如下

事件 描述
loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败
play 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause 播放暂停,当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seeking seeking属性变为true,浏览器正在请求数据
seeked seeking属性变为false,浏览器停止请求数据
timeupdate 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange 播放时长被改变
volumechange volume属性(音量)被改变或muted属性(静音状态)被改变

video 事件javascript举例:视频完成时跳转到其他页面

var Media=document.getElementById("video1");
Media.addEventListener('ended',function(){
    window.location.href="http://www.anttoweb.com/kb/";
});

补充一个iphone上页面加载完成时mp3,MP4无法自动播放的问题:

据说是为了客户省流量;

<audio id="call-audio" src="assets/videos/call.mp3" loop="loop" autoplay="autoplay">
    您的浏览器不支持 audio 标签。
</audio>

function audioAutoPlay(id){
  var audio = document.getElementById(id),
    play = function(){
      audio.play();
      document.removeEventListener("touchstart",play, false);
    };
  audio.play();
  document.addEventListener("WeixinJSBridgeReady", function () {//微信
    play();
  }, false);
  document.addEventListener('YixinJSBridgeReady', function() {//易信
    play();
  }, false);
  document.addEventListener("touchstart",play, false);
}
audioAutoPlay('call-audio');

手机上希望视频内嵌播放

<video x-webkit-airplay="allow" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline="true" src="your-video.mp4" poster="world-cup.jpg" width="100%" height="auto">
您的浏览器不支持 video 标签。
</video>

移动端视频问题可以参考一下,不过时间过去很久了,部分问题移动端已修复: https://segmentfault.com/a/1190000006857675

766 total views, 4 views today

Revisions

There are no revisions for this post.

No comments yet.

发表评论