如何解决带有自定义控件的视频无法在 iOS 上播放safari 和 chrome
我正在使用 Django 开发一个平台,该平台托管直接上传到服务器上的视频。 我正在测试应用程序,我得到的结果是视频在桌面上播放良好,但它们没有在移动 iOS(Safari 和 Chrome)上播放,而是在使用 android 10 的移动设备上播放。视频遵循正确的格式(mp4) 和编码标准(H264、AAC)。
我阅读了不同的主题,这些主题讨论了在 iOS 上触发和播放视频 (ex.1 ex.2) 的正确方法,但即使我遵循此准则,我也无法按下播放按钮时触发视频播放。我不知道这有什么问题。
代码如下:
<div class="c-video">
<video class="video" id="video" src="{{ video.video.url }}" type='video/mp4' poster="{{ video.image.url }}"> </video>
<div class="controls">
<div class="bar">
<div class="dragger"></div>
<div class="barline"></div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
<div class="volume-slider">
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>
</div>
</div>
<script>
var video = document.getElementById("video");
var btn = document.getElementById("play-pause");
btn.addEventListener('click',function(e) {
if (video.paused || video.ended) video.play();
else video.pause();
});
</script>
我也尝试直接从按钮触发播放事件,如下所示,但没有任何改变:
<div class="buttons">
<button id="play-pause" onclick="togglePlay();"></button>
</div>
<script>
var video = document.getElementById("video");
var btn = document.getElementById("play-pause");
function togglePlay() {
if (video.paused || video.ended)
video.play();
else
video.pause();
}
</script>
解决方法
正如@Mick 所建议的,问题可能出在视频文件的编码上,这是在上传到应用程序的视频文件之一上运行 ffprobe 时的输出结果:
ffprobe version 4.4 Copyright (c) 2007-2021 the FFmpeg developers
built with Apple clang version 11.0.0 (clang-1100.0.33.17)
configuration: --prefix=/usr/local/Cellar/ffmpeg/4.4_2 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-avresample --enable-videotoolbox
libavutil 56. 70.100 / 56. 70.100
libavcodec 58.134.100 / 58.134.100
libavformat 58. 76.100 / 58. 76.100
libavdevice 58. 13.100 / 58. 13.100
libavfilter 7.110.100 / 7.110.100
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 9.100 / 5. 9.100
libswresample 3. 9.100 / 3. 9.100
libpostproc 55. 9.100 / 55. 9.100
Input #0,mov,mp4,m4a,3gp,3g2,mj2,from 'SANCHO_LUA.mp4':
Metadata:
major_brand : mp42
minor_version : 0
compatible_brands: mp42mp41
creation_time : 2021-06-13T02:23:50.000000Z
Duration: 00:07:48.07,start: 0.000000,bitrate: 10305 kb/s
Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661),yuv420p(tv,bt709),1280x720,9984 kb/s,25 fps,25 tbr,25k tbn,50 tbc (default)
Metadata:
creation_time : 2021-06-13T02:23:50.000000Z
handler_name : ?Mainconcept Video Media Handler
vendor_id : [0][0][0][0]
encoder : AVC Coding
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D),48000 Hz,stereo,fltp,317 kb/s (default)
Metadata:
creation_time : 2021-06-13T02:23:51.000000Z
handler_name : #Mainconcept MP4 Sound Media Handler
vendor_id : [0][0][0][0]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。