自动播放视频并单击声音,从手机存储中播放视频

时间:2019-09-28 18:33:38

标签: html angular cordova ionic-framework video

我正在尝试实现以下内容:

  • (1)(选择iPhone后,便可以从手机存储中播放本地视频)
  • (2)当屏幕上显示一定比例的视频播放器时自动播放内嵌视频,并且当您单击视频时能够打开声音

(1)关于第一个问题,我可以检索videoUrl,但未播放。我在另一篇文章中读到,您必须删除部分字符串/ private /才能从本地电话存储中播放视频。我尝试了这个没有成功。但是,我希望解决方案接近,因为我有videoURL。

(2)关于第二个问题,视频正在自动播放,但它会立即播放,我无法通过单击视频来打开视频声音。我一直遵循的教程是实现这一目标的。 https://medium.com/@JordanBenge/ionic-4-autoplay-videos-on-scroll-6eb00213cdb4。但是,您可以决定何时播放视频的部分[inViewportOptions] =“ {阈值:[0,0.65],部分:true}” 当我尝试在HTML文件中实现该错误时,会给我一个错误。

(1) 这是我的html.file:

<div tappable (tap)="changeVideoAudio(video?.id)">
    <video [hidden]="hideChosenVideo"
           inViewport
           (inViewportAction)="onIntersection($event)"   
           playsinline loop
           [muted]="'muted'" preload="auto" muted="muted"
           poster="{{chosenVideoHolder}}"    
           id="video1" class="video-media">
       <source src="{{chosenVideoHolder}}" type="video/mp4" src="">
    </video> 
</div>

要取消静音的TS文件:

public changeVideoAudio(id: string) {
    let vid: any = document.getElementById('media-' + id);
    vid.muted = !vid.muted;
}

(2)

要从本地电话存储中获取视频,请执行以下操作:

his.camera.getPicture(cameraOptions).then(async (videoUrl) => {
    f (videoUrl){
       let stringConv = String(videoUrl);
       let test123 = stringConv.replace('/private/', '');
       this.chosenVideoHolder = test123;
    }
});

HTML文件

<video [hidden]="hideChosenVideo"
       inViewport
       (inViewportAction)="onIntersection($event)"   
       playsinline loop
       [muted]="'muted'" preload="auto" muted="muted"
       poster="{{chosenVideoHolder}}"    
       [id]="'media-' + video?.id">
    <source src="{{chosenVideoHolder}}" type="video/mp4" src="">
</video> 

总而言之,我希望获得帮助的是我必须更改才能播放从手机存储中本地选择的视频。我不确定在获取videoURL时是HTML文件还是TS文件中的问题。

对于另一个问题,似乎我使用了错误的inViewportOptions。有没有我可以调整的方法,还是有另一种方法可以实现这种解决方案?

0 个答案:

没有答案