视频

1. canvas 播视频, iphone6sp 多次刷新有问题(其他手机没有)。
2. video标签播放视频:
(1) 全屏问题:
iOS: 原生的全屏按钮,在全屏时不可控,不能控制视频播放结束,关闭视频。
安卓:视频全屏播放时,不能出现原生的进度条。
(2) 重复播放多个视频的问题:
iOS: 可以
安卓: 每个视频第一次播放时或者是视频连续播放时都没有问题。 
             如: (1)A视频 -----> B视频  ------> C 视频
                      (2)A视频 -----> B视频  ------> B视频
             视频第二次被播放会自动不是全屏播放,出现原生的进度条,播放结束时播放广告:
             如: A视频 ----> B视频  ----> A视频
            解决方法:
            播放不同的视频时,切换同一个video标签的src值,可以避免安卓手机上播放广告的问题。
            京东上播放动画的问题:
            动画的卡顿与video标签预加载有关 (load 方法---> 影响了序列帧播放和canvas播放视频) (序列帧图片太多,太大可能也是一部分原因),解决:放到
            
            
  • 调整视频提供的播放控件按钮的样式:
  • // 全屏按钮
  • video::-webkit-media-controls-fullscreen-button {
  •   display: none;
  • }
  • // 播放
  • video::-webkit-media-controls-play-button {
  •   display: none;
  • }
  • // 视频进度条
  • video::-webkit-media-controls-timeline {
  •   display: block;
  • }
  • // 视频当前播放监督
  • video::-webkit-media-controls-current-time-display{
  •   display: block;
  •   padding-left: 5px;
  • }
  • // 显示视频剩余时长
  • video::-webkit-media-controls-time-remaining-display {
  •   display: block;
  •   padding-left: 5px;

  • }
  • // 静音
  • video::-webkit-media-controls-mute-button {
  •   display: none;
  • }
  • video::-webkit-media-controls-toggle-closed-captions-button {
  •   display: none;
  • }
  • // 调节声音大小
  • video::-webkit-media-controls-volume-slider-container{
  •   display: none;
  • }
  • video::-webkit-media-controls-volume-slider{
  •   display: none;
  • }
  • // 下载
  • video::-internal-media-controls-download-button {
  •   display:none;
  • }
  • video::-webkit-media-controls-enclosure {
  •   overflow:hidden;
  • }
  • video::-webkit-media-controls-panel {
  •   width: calc(100% + 30px);
  • }
            
立即登录, 发表评论.
没有帐号? 立即注册